Operation Manual

DREAMWEAVER CS3
Handboek
142
Container div-label, 780 pixels, geen marge
A. Tekst links uitgelijnd B. Witte achtergrond C. Ononderbroken zwarte rand van 1 pixel
Met de volgende CSS-regel worden stijlregels gemaakt voor de sidebar div-label:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
Volgens de regel #sidebar krijgt de sidebar div-label een breedte van 200 pixels, een grijze achtergrond, een opvulling boven
en onder van 15 pixels, een opvulling rechts van 10 pixels en een opvulling links van 20 pixels. Daarnaast wordt de sidebar
div-label gepositioneerd met float: left—een eigenschap waardoor de sidebar div-label naar de linkerkant van de container
div-label wordt geduwd. Het toepassen van de regel op de sidebar div-label heeft het volgende resultaat:
Sidebar div, links zwevend
A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels
Ten slotte maakt de CSS-regel voor de container div-hoofdlabel de lay-out af:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte
van 250 pixels wordt geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div.
Daarnaast zorgt de regel voor een ruimte van 20 pixels aan de rechter-, onder- en linkerkant van de main content-div. Het
toepassen van de regel op de mainContent-div heeft het volgende resultaat:
B
C
A
B
B
A