03.05.2013 Views

Dreamweaver CS3 - Adobe

Dreamweaver CS3 - Adobe

Dreamweaver CS3 - Adobe

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

C<br />

Container div-label, 780 pixels, geen marge<br />

A. Tekst links uitgelijnd B. Witte achtergrond C. Ononderbroken zwarte rand van 1 pixel<br />

Met de volgende CSS-regel worden stijlregels gemaakt voor de sidebar div-label:<br />

#sidebar {<br />

float: left;<br />

width: 200px;<br />

background: #EBEBEB;<br />

padding: 15px 10px 15px 20px;<br />

}<br />

DREAMWEAVER <strong>CS3</strong><br />

Handboek<br />

Volgens de regel #sidebar krijgt de sidebar div-label een breedte van 200 pixels, een grijze achtergrond, een opvulling boven<br />

en onder van 15 pixels, een opvulling rechts van 10 pixels en een opvulling links van 20 pixels. Daarnaast wordt de sidebar<br />

div-label gepositioneerd met float: left—een eigenschap waardoor de sidebar div-label naar de linkerkant van de container<br />

div-label wordt geduwd. Het toepassen van de regel op de sidebar div-label heeft het volgende resultaat:<br />

B<br />

B<br />

A<br />

A<br />

Sidebar div, links zwevend<br />

A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels<br />

Ten slotte maakt de CSS-regel voor de container div-hoofdlabel de lay-out af:<br />

#mainContent {<br />

margin: 0 0 0 250px;<br />

padding: 0 20px 20px 20px;<br />

}<br />

B<br />

Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte<br />

van 250 pixels wordt geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div.<br />

Daarnaast zorgt de regel voor een ruimte van 20 pixels aan de rechter-, onder- en linkerkant van de main content-div. Het<br />

toepassen van de regel op de mainContent-div heeft het volgende resultaat:<br />

142

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!