De division, ofwel het divje.
Bron: http://www.sceneone.nl/positionering/div.php
Titel: HTML en CSS tutorials
Auteur: Wybe Weysters
De division (engels voor 'onderdeel') 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.
Het divje is een block element.
Zoals met de eigenschappen van alle html elementen beschrijf je ook de eigenschappen van een divje in je css:
CSS: #box1{
width: 200px;
height: 100px;
border: 2px solid #666;
background: orange;
text-align: center;
}
.p1{
font-weight: bold;
color: orange;
}
.p2{
color: #666;
}
HTML: <p class="p1">Omdat zowel de p als de div block elementen zijn zullen
ze nooit op 1 regel staan.</p><div id="box1"><p class="p2">Ook al
zet ik ze in de html wel op dezefde regel.<br />Wat wel kan is een p in een div zetten.</p></div>
Nog een voorbeeld:
CSS: #box1{
width: 200px;
height: 100px;
border: 2px solid #C00;
background: #999;
margin-bottom: 5px;
}
#box2{
width: 250px;
height: 188px;
background: url(../_img/voorbeeld_img.jpg) no-repeat 0 0;
}
.p1{
font-weight: bold;
color: black;
}
HTML: <div id="box1">De twee div's komen automatisch onder elkaar te staan:
natuurlijke flow van de pagina.<br /> In box2 is in de css een afbeelding als background-image geplaatst.</div>
<div id="box2"></div>
En dit is natuurlijk nog maar het begin.........
De voorbeelden hierboven laten zien hoe je met behulp van div's stukjes van de content van je pagina kunt
inkaderen en hoe je de natuurlijke flow van de pagina kunt laten bepalen waar wat komt te staan.
In de volgende onderdelen van dit hoofdstuk zullen we zien hoe je de positionering van de div's naar je
hand kunt zetten. Hoe je handig gebruik kunt maken van de flow van de pagina, of hoe je een division geheel of gedeeltelijk uit
die flow kunt halen en ze hun eigen eigenschappen mee kunt geven.