Operation Manual

DREAMWEAVER CS3

Handboek

141

A. Containerelement B. Sidebar div C. Element Hoofdinformatie (Main Content)

Hier volgt de codering voor alle drie div-elementen in de HTML:

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus

venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus

rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

In het bovenstaande voorbeeld is er geen “stijl” verbonden aan de div-elementen. Als er geen CSS-regels zijn opgegeven,

worden alle div-elementen met hun informatie op de standaard plaats op de pagina aangebracht. Als echter ieder div-

element van een unieke ID is voorzien (zoals in het bovenstaand voorbeeld), kunt u de IDs gebruiken om CSS-regels te

maken zodat deze (als ze worden toegepast) de stijl en de positionering van de div-elementen kunnen wijzigen.

De volgende CSS-regel, die zich in de kop van een document of in een extern CSS-bestand kan bevinden, geeft de stijlregels

voor het eerste div-element (het “containerelement”) op de pagina:

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

De #containerregel past een stijl toe op het container-div-element waardoor het een breedte krijgt van 780 pixels, een witte

achtergrond, geen marge (vanaf de linkerkant van de pagina), een vast en zwart kader van 1-pixel en tekst die links is

uitgelijnd. Het resultaat van toepassing van de regel op het container-div-element is als volgt: