inhoud van DIV's overlapt

[Ed121212]

Het lijkt zo simpel, en toch loop ik weer tegen een muur aan...

Ik heb 2 DIV's (header en navbar) vast bovenaan de pagina.
Daaronder 3 kolommen content.
Daaronder footer.

structuur:
wrapper
row-1
row-2
row-3
row3col1 row3col2 row3col3
row-4


CSS:
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#row-1 {
height: 80px;
width: 800px;
position: fixed;
top: 0px;
z-index: 10;
}

#row-2 {
height: 36px;
width: 800px;
position: fixed;
top: 80px;
z-index: 20;
}

#row-3 {
height: auto;
width: 800px;
top: 140px;
position: relative;
}
#row3col1 {
float: left;
height: auto;
width: 150px;
}
#row3col2 {
float: left;
height: auto;
width: 500px;
}
#row3col3 {
float: left;
height: auto;
width: 150px;
}
#row-4 {
clear: both;
height: 25px;
width: 800px;
position: relative;
}

Vraag: Waarom komt in webbrowser de tekst van row-4 toch over de tekst van row-3 te staan? (Ik heb toch clear:both gebruikt?)

Vraag: Met bovenstaande code geeft DW wysiwyg-view een stuk met witregels weer tussen row-2 en row-3. Is dat logisch? Is het te vermijden?

 

[csshunter]

Hoi Ed121212,

Eerste vraag:
De {position: relative;} van zowel row-3 als row-4 gooit roet in het eten. Row-4 staat nu niet meer in relatie tot row-3 maar is relatief t.o.v. het gemeenschappelijk ouder-element (de #wrapper). De beide relative's kunnen weggelaten worden, dat geneest.

Tweede vraag:
Dat is wel logisch: row-1 is 80px hoog, row-2 is 36px hoog, en 80+36=116px.
Je laat row-3 beginnen op 140px van boven. Dat is dus 24px witruimte.
NB: i.v.m. het weglaten van de relatieve positie van row-3 moet de afstand opgegeven worden als {margin-top: 116px;} i.p.v. {top: 116px;}

• Voorbeeld alhier: www.developerscorner.nl/csshunter/tests/row-the-boat.htm

Als je verder niet iets speciaals van plan bent met de #wrapper, kan die gemist worden: de #wrapper-styles kunnen gewoon naar de body-css.

Met vriendelijke groet,
CSShunter

 

[Ed121212]

He, dat werkt!:thumb:
Je toelichting moet ik nog wel ff laten bezinken...

Bedankt voor het uitgebreide voorbeeld met toelichting!

 

[csshunter]

Hoi-hoi!

Je toelichting moet ik nog wel ff laten bezinken...

Ja, het gebruik van "position" hoort tot de lastigste dingen van css.
Moet je dit maar eens (proberen te) lezen uit de css2.1-specificatie:

• www.w3.org/TR/CSS2/visuren.html#choose-position
• www.w3.org/TR/CSS2/visuren.html#relative-positioning
• www.w3.org/TR/CSS2/visuren.html#absolute-positioning
• www.w3.org/TR/CSS2/visuren.html#fixed-positioning
• En de bekroning: www.w3.org/TR/CSS2/visuren.html#comparison - Dus! :d

Na 3 alinea's heb ik wel minstens een week bezink-tijd nodig ... om dan weer opnieuw te beginnen. Je zal toch zoiets zonder te spieken in eigen woorden moeten navertellen aan een leergierig schoolklasje!