banner

3.1: Het div-element

Het nieuwe element wat we hier gaan introduceren wordt gebruikt om blokken te maken die je op je webpagina kan plaatsen. De afkorting <div> komt dan ook van het Engelse woord "division" wat in het nederlands "gedeelte" of "divisie" betekent. Net zoals bij tabellen kunnen div-elementen alle andere elementen bevatten. Hierdoor zijn div's uitermate geschikt om de layout van een webpagina te bepalen. Dit konden we al doen door middel van tabellen, maar je moet de elementen gebruiken waarvoor ze daadwerkelijk voor bedoeld zijn. Als we dit gaan bekijken voor zowel div's als tabellen zie je dat:

The DIV elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

Hier zie je dus dat div's er voor zijn gemaakt om voor structuur binnen de pagina te zorgen, in combinatie met een class of id optie. Tabellen daarentegen zijn er voor gemaakt om gegevens te rangschikken. Daarom gebruiken we voortaan div's om de layout van onze pagina's te maken.

In hoofdstuk 2.3 heb je al gezien dat we div's gebruikt hebben om 2 blokken te maken, namelijk een "banner" en een "content" blok. Hieronder is nog een voorbeeld van een veelgebruikte layout voor webpagina's:

html5 code CSS bestand Internet Explorer

<html>
  <head>
    <title>Titel van website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="all" />
  </head>
<body>
<div id="left"><p>Left</p></div>
<div id="right"><p>Right</p></div>
</body>
</html>

#left {
background-color: #99CC00;
width: 150px;
height: 100px;
}

#right {
background-color:#FF9900;
width: 150px;
height: 100px;
}

Left

Right

Zoals je ziet is het html5 bestand een stuk overzichtelijker in tegenstelling tot als we dit met tabellen zouden doen. We hebben nu twee div elementen op de pagina geplaatst en ze "left" en "right" genoemd in CSS. Ze staan echter nog onder elkaar. Dit komt omdat html5 de elementen ziet als twee losse blokken. Om ze naast elkaar te kunnen plaatsen kunnen we gebruik maken van de style-optie float: left; of float: right;. Als we dit aan het CSS bestand toevoegen zal de orange div links van de groene div komen te staan.

Om de afstanden tussen, en de afstanden in de div's zelf te veranderen, hebben we nieuwe style-opties nodig. Deze worden met behulp van een BoxModel uitgelegt, dit vind je terug in het volgende hoofdstuk.