11 Een paginaschikking via divs
We hebben al aangegeven dat divs dé aangewezen manier zijn om een website te bouwen. Het is echter niet evident om een site te bouwen met divs. Daar komt ook nog eens het feit bij dat je verplicht met CSS moet werken.
We geven een korte initiatie tot divs en komen er in Deel 2 uitgebreid op terug.
Een div is niet meer dan een gebied. We moeten ons gebied nu een grootte geven en hem positioneren.
Dit doen we in CSS.
We gaan naar de HTML-weergave en typen volgende code in:
<div id=”inhoud”>Hier komt de inhoud van mijn pagina te staan.</div>
Een andere optie is dat je de div invoegt via het
menu Invoegen > Div. 
We willen onze div een CSS-opmaak geven, voor kleuren, grootte en positionering.
Kies voor Nieuwe CSS-regel. Onderstaand venster verschijnt:
We gaan nu bij kader een breedte en hoogte invullen.
Bij positioneren zien we dat er enkele belangrijke verschillende posities zijn: absoluut, relatief en gefixeerd.
Tegenwoordig wordt relatief het meeste gebruikt.
Wanneer je via relatief werkt, ga je geen plaatsing doen via Placement, maar via de marges (bij kader).
Een div is standaard doorzichtig. Door een achtergrondkleur, -figuur of rand te geven, kan je de div echt zien. Dit wordt echter vaker niet dan wél gedaan.
Achtergrondkleur:
Rand:
Klik op OK.
Je kan een samenvatting van de instellingen zien in het paneel CSS ontwerpen.
Resultaat:
De div staat op de gewenste plaats en heeft in bovenstaand voorbeeld een kleur om duidelijk te maken hoe groot de div is.
Het is ook mogelijk om een div te centreren. Je moet de marges dan op auto plaatsen:
We gaan nu met meerdere divs werken:
<div id="links">Dit is de
linkerdiv</div>
<div id="rechts">Dit is de
rechterdiv</div>
Het maakt helemaal niet uit of je deze HTML-code naast of onder mekaar zet. De onderlinge posities worden volledig bepaald door de CSS.
Het is mogelijk om divs naast te plaatsen, als je ze op float:left zet.
Wanneer je twee of meerdere divs naast mekaar zet, dan kan je er best nog een div rond zetten. Deze wordt vaak “container” genoemd.
<div id="container">
<div
id="links">Dit is de linkerdiv</div>
<div
id="rechts">Dit is de rechterdiv</div>
</div>
Zorg dat de container steeds even breed is als links en rechts tesamen! Zoniet springen de twee divs onder mekaar.