Sidebar
Les 2 - Leren hoe je een design kunt opdelen
Er van uitgaande dat je een basiskennis hebt van XHTML en CSS, zal ik je nu uitleggen hoe je een design kunt opdelen en omzetten naar een webpagina door middel van DIV tags en CSS.
3-blok-layout
De makkelijkste layout is de 3-blok-layout. Deze is, zoals de naam al zegt, opgedeeld in 3 blokken:
- Header
- Content
- Footer
Hierbij zou je eventueel tussen Header en Content nog "Menu" kunnen zetten. We houden het echter even bij de versie zonder menubalk en gaan uit van het onderstaande design:
Zoals je ziet staan hierin de 3 blokken Header, Content en Footer in verdeeld. Er is echter nog 1 blok dat altijd aanwezig is. Dit blok staat bekend als de "wrapper", omdat dit blok de andere 3 blokken bij elkaar houdt. Het is op de afbeelding te zien als de binnenste zwarte lijn die om de 3 blokken heen loopt. Dit kan je bereiken door de onderstaande code:
width: 600px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 600px;
height: 100px;
float: left;
background-color: #D1D1D1;
text-align: center;
}
#content {
width: 600px;
float: left;
background-color: #9E9E9E;
text-align: left;
}
#footer {
width: 600px;
height: 30px;
float: left;
background-color: #6C6C6C;
text-align: center;
line-height: 0em;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<h6>Footer</h6>
</div>
</div>
Het resultaat van deze CSS en HTML code, is op deze pagina te zien.
4-blok-layout
Een layout die je ook erg vaak tegenkomt op het internet, is de 4-blok-layout. Deze is opgedeeld in de volgende 4 blokken:
- Header
- Sidebar
- Content
- Footer
Zoals je al kan raden, staat de sidebar aan de zijkant. Meestal is dit rechts, omdat men daar advertenties of links in plaatst. De 4-blok-layout ziet er als volgt uit:
Zoals je ziet staan hierin de 3 blokken Header, Content en Footer in verdeelt. Ook bij dit design is er weer een wrapper aanwezig. Er is echter 1 ander blok bijgekomen, en dat is de sidebar. Deze staat rechts van de blokken "Content" en "Footer". Bij dit design moet je in de HTML code de sidebar invoegen, VOOR het blok "content". Dit kan je bereiken door de onderstaande code:
width: 600px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 600px;
height: 100px;
float: left;
background-color: #D1D1D1;
text-align: center;
}
#sidebar {
width: 200px;
float: right;
background-color: #B3B3B3;
text-align: center;
}
#content {
width: 400px;
float: left;
background-color: #9E9E9E;
text-align: left;
}
#footer {
width: 600px;
height: 30px;
float: left;
background-color: #6C6C6C;
text-align: center;
line-height: 0em;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<p>Sidebar</p>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<h6>Footer</h6>
</div>
</div>
Het resultaat van deze CSS en HTML code, is op deze pagina te zien.