Vlakverdeling

Een <div> kan zich gedragen als blok-element of als inline-element.
Via { display: block; } of { display:inline; }

Centreren
Een <div> plaatst zich ten opzichte van omliggende xhtml-elementen. Is de <div> smal, dan komt ie misschien naast een aangrenzende smalle <div>.

Om een <div> te centreren plaats je eerste een <div> daar omheen met { display:block; width:100%; text-align:center; }.
Daarbinnen komt de gecentreerde <div> met { width:52%; margin-right:auto; margin-left:auto;}

Twee kolommen
Wie tekst over twee kolommen wil verdelen kan als volgt te werk gaan.
1 – maak een <div> voor de opmaak van alle inhoud
2a – maak daarbinnen een <div> + {float:left } en een <div> + { float: right; }.
2b – of maak daarbinnen tweemaal <div> + { display:inline; }

Het volgende blok element wordt <div> + {clear:both} waarmee het onder al het voorafgaande komt te staan.

Drie kolommen
Wie tekst over twee kolommen wil verdelen kan als volgt te werk gaan.
1 – maak een <div> voor de opmaak van alle inhoud
2 – maak daarbinnen
een <div> + {float:left; width:32%} en
een <div> + {float:left; width:32%} en
een <div> + {float:left; width:32%}.

Hou de marges links en rechts goed in de gaten. Wordt de totale breedte van de drie kolomen én de onderlinge afstand meer dan 100% dan schuift de rechter kolom naar onder.

Het volgende blok element wordt <div> + {clear:both} waarmee het onder al het voorafgaande komt te staan.

Absolute postie
Een <div> gedefinieerd met ‘position: absolute’ krijgt een vaste postitie op een pagina. Onafhankelijk van de positie van alle andere inhoud!
Daarbij horen de definities voor
·· top = afstand van bovenrand div tot bovenkant pagina
·· left = afstand van linkerrand div tot linkerkant van pagina
·· height = hoogte van de div
·· width = breedte van de div
Alle afstanden zijn in pixels.
Zorg ervoor dat de inhoud altijd binnen de <div> blijft passen.

Relatieve positie
Een <div> blijft in de gangbare volg-orde van andere xhtml-elementen op een pagina. Bij een aangepaste positie, verplaatst de <div> zich ten opzichte van alle andere elementen.

Voor- en achtergrond
Aan een <div> is een z-index meet te geven. Hoe hoger het meegegeven getal, des te verder naar voren komt de <div>.
Dus een <div> met ‘z-index:1;’ komt achter een <div> met ‘z-index: 2;’

17 februari 2010 door Joost Kahmann
Categories: css2