Absolute positionering ap div's in een 'content' div?

[JNU]

(zonder ervaring vol goede moed bezig in Dreamweaver CS5)

Tot mijn schrik zag ik dat de ap div’s die ik gebruikte om images op m'n webpagina te positioneren, uit beeld lopen (m’n site heeft een fixed width midden’kolom’: div ”content”). En ik wil op mijn site graag images ap div’s gebruiken, omdat ik daarvan de positie kan bepalen dmv slepen.

Mijn vraag: als ap div’s altijd een absolute waarde hebben (stom, ik had niet door dat de a en p in ‘ap’ daarvoor stonden :shocked, en ik plaats ze in een div “content” (de midden'kolom' dus)… kan ik dan de positionering niet laten afhangen van de content? Of blijft dit altijd de pagina zelf?

…
Nu heb ik hier op het forum diverse posts gelezen en ik geloof dat ik ap div’s maar moet vergeten, maar ik snap niet hoe ik normale div’s kan postioneren, behalve onder elkaar.

 

[JNU]

link naar twee screenshots:

http://www.flickr.com/photos/61710909@N07/

 

[csshunter]

Hoi JNU,
Welkom! Je zou eens kunnen proberen of het helpt om de #content een relatieve positie te geven:

#content {
    ...
    position: relative;
    ...
}

Om gewone <div>'s een positie te geven, kan je ze (met een bepaalde breedte) laten "drijven" {float: left;} of {float: right;}, eventueel met floats tegen elkaar aan drijvend, of juist met een bepaalde margin t.o.v. de vorige.

• Zie bv. www.w3schools.com/css/css_float.asp

Met vriendelijke groet,
CSShunter

 

[JNU]

Bedankt, ik ga er morgen direct naar kijken.

Vwb het gebruik van divs die 'float'en... dat wordt toch erg statisch? Alles netjes tegen elkaar aan gefloat, ofwel: op een (1) lijn? Ik wilde juist de afbeeldingen wat speelser verwerken: de een wat hoger dan de ander en weer een ander wat meer naar rechts dan de rest.
Ap div's leken mij ideaal omdat ik ze gewoon gesleept heb naar waar ik ze wilde hebben...

 

[csshunter]

Hoi JNU,
Nou, floats kan je ook hoger of lager zetten, en met verschillende horizontale afstand tot elkaar.

• Hier is bv. een dambord-test: www.developerscorner.nl/csshunter/tests/br-honden6.htm

De linker-afbeeldingen hebben een {float: left;}, de rechter een {float: right;}, en de middelste hebben geen float, dan komen ze ertussen.

Maar in jouw geval is er vanwege het gebruik van uitsluitend images geen risico dat de (tekst-) inhoud uit een apDiv gaat lopen, of een andere apDiv gaat doorkruisen. Dan zou het ook met de AP's t.o.v. de omringende container moeten gaan, als die zelf een RP krijgt (zie boven).

Een heel ander alternatief is nog, om alle afbeeldingen in één afbeeldingen-collage te monteren. Ik weet niet of dan de bestandsgrootte van het collage-img veel groter wordt dan de optelsom van de losse, dat zou je even moeten proberen.
Als het erg veel groter wordt, vertraagt dat de pagina.

• Maar aan de andere kant: het moeten downloaden van bv. 7 losse afbeeldingen is ook tijdsintensief. Er moet dan vanuit de browser 7 keer een "http-request" naar de server gestuurd worden om die 7 op te halen. En zo'n http-request is uploaden vanaf de computer van de bezoeker! En terwijl downloaden altijd erg snel gaat, is het uploaden vanaf een lokale computer erg traag (dat loopt niet gelijk op).
• Per saldo kan je dus bij één iets groter img-bestand toch tijdwinst boeken t.o.v. vele kleintjes.
• En in een tekenprogramma met laagjes kan je ook lekker schuiven met de posities van de onderdelen.
• Dat kan je dus ook gebruiken om eerst een mooi totaalbeeld te maken. Daarna kan je opmeten hoeveel pixels elke linkerbovenhoek van een afbeelding vanaf de linksboven-hoek van de container ligt.
  Dan heb je zonder trial-and-error de getallen die in de css moeten komen.

Met vriendelijke groet,
CSShunter

 

[JNU]

Met vriendelijke groet,
CSShunter

Bedankt weer.

Ik heb voorlopig e.e.a. in een tabel verwerkt. Om te gruwelen, maar ja… ik moet zeggen dat de float-methode van divs optisch erg lijkt op tabellen: ik zie duidelijk dat ze in lijnen staan en dat vind ik gewoon niet mooi: te statisch.
Een collage werkt ook niet, omat de afzonderlijke afbeeldingen weer een functie hebben, bijv ‘roll-over image’ en verschillende links. Dan zou ik weer moeten werken met image maps, maar dat wilde ik eigenlijk ook niet doen.

Omdat ik toch de ap div's wil gebruiken, ga ik verder puzzelen met de relative position van de content.
Dwz, ik heb het al geprobeerd en het haalde niets uit.
Nu heb ik ook een container, en ik vraag me af of ik die niet 'relative' moet maken ipv de content. Ik ga morgen weer even testen...

 

[csshunter]

Hoi JNU,

Nu heb ik ook een container, en ik vraag me af of ik die niet 'relative' moet maken ipv de content.

Zou wel eens kunnen, of misschien ook alle twee. - Mocht 't blijven mislukken, zet dan even een testpagina online, dan kunnen we eens kijken.

Want in principe (en in de praktijk) moet het kunnen met apDiv's die in een rpDiv zitten. Ze mogen elkaar desgewenst ook overlappen.

• Test apDiv: www.developerscorner.nl/csshunter/tests/test-apDiv.htm

Net zoals het in principe (en in de praktijk) kan met gefloate images (die kunnen elkaar ook overlappen).

• Test floaters: www.developerscorner.nl/csshunter/tests/test-floaters.htm

Op de pixel identiek!

Alleen, als gezegd: de float-versie is zwaar in het voordeel zodra er teksten bij om de hoek komen kijken.
Vergroot het letterformaat maar eens in de browser (FF of IE), met "alleen inzoomen op tekstgrootte", en dan ...

• ... gaat in de apDiv-versie het onderschrift dwars door de #footer heen,
• ... terwijl in de float-versie de #footer keurig naar beneden wordt verschoven.

Vandaar mijn huiver voor apDiv's!

Met vriendelijke groet,
CSShunter

 

[JNU]

[...]

Met vriendelijke groet,
CSShunter

Het is gelukt. Niet de content, maar de container moet 'relative' gemaakt worden (toch vreemd: erg logisch vind ik het niet).

Je voorbeelden zien er goed uit; ik ga me daar binnenkort eens meer in verdiepen... ik heb het mezelf eigenlijk te moeilijk gemaakt, gewoon door onwetendheid

Voorlopig staan er trouwens geen teksten, alleen images in de apdiv's.

Bedankt!