Indelen met een div voor de positieCSS aan HTML

Als voorbeeld zetten we een afbeelding rechts onderin deze pagina. Hiervoor gebruiken we een division (engels voor 'onderdeel').
Een divje beschrijft een deel van je pagina. Het is een afgesloten, omkaderd deel van je pagina. Een divje (=division) kan iedere afmeting hebben die jij wilt en kan zichzelf bevinden op iedere positie die jij wilt. Je kunt in zo'n box (=division) zo'n beetje alles kwijt wat je maar wilt: tekst, een afbeelding, een tabel, een list, een andere div, een form, etc.

Zoals met de eigenschappen van alle html elementen beschrijf je ook de eigenschappen van een divje in je css:
#hoekjerechts {
position: absolute;
background-image: url(pics/hoek1k.gif);
width: 150px;
height: 149px;
right: 0px;
bottom: 0px;
}

In de HTML pagina neem je de div op op de volgende manier:
<div id="hoekjerechts" ></div>

Je kunt ook een divje maken in CSS en dan tekst typen tussen de tags: <div id="tekstvak" > Deze tekst staat tussen div-tags </div>
Als voorbeeld is hier een divje 'tekstvak' gemaakt dat links in een omkaderd vakje staat.

Je kunt de hele opmaak van je pagina maken met divjes. Dat is een betere manier dan een indeling met frames of tabellen, enige oefening is echter wel vereist.
Bij de Links staat een site dat templates beschikbaar stelt die geheel gebaseerd zijn op een indeling met divs. Kopieer en wijzig naar eigen smaak, dat is beter dan zelf alles bedenken.

De breedte die je aan een DIV geeft verandert als je gaat werken met padding, margin en border. Zie hieronder voor enkele voorbeelden:

Eenvoudige DIV
De DIV wordt vanzelf hoger als de tekst er niet meer in past.
Hier zit een padding van 5px in. Je ziet dat de tekst een stukje van de rand af ligt.
Hier zit een margin van 5px in. Je ziet dat de tekst een stukje van de rand af ligt.

Aan alle zijden zit ruimte!

Hier zit een border van 5px in. Je ziet dat de tekst een stukje van de rand af ligt.

Meer uitleg hierover kun je vinden op sceneone.nl (zie links) of de site met templates.

Deze tekst staat tussen div-tags