Ik ga uit van een typische kolommenindeling bij ons praktijkproject. Voordat ik dit project echter live en in kleur presenteer, wil ik jullie heel specifiek laten zien hoe jullie zelf kolommenindelingen kunnen implementeren. De focus zal liggen op lay-outs met twee of drie kolommen, aangezien deze nog steeds de basis vormen voor het merendeel van de websites.
De absolute klassieker in webdesign is waarschijnlijk de tweedelesser. In het linker venstergebied wordt meestal de navigatie weergegeven, terwijl in de rechterkolom de eigenlijke inhoud te zien is. In verband met blogs is dit gedrag overigens iets veranderd. In veel blogs wordt aan de rechterkant nu navigatie of advertenties weergegeven, terwijl aan de linkerkant de eigenlijke inhoud wordt getoond.
Zulke toepassingen kunnen relatief eenvoudig worden geïmplementeerd met CSS. Tweespalters zijn eigenlijk de eenvoudigste vorm van lay-out.
In het volgende voorbeeld zal ik een tweespalter laten zien die uitkomt met absolute percentage waarden.
Hier is het volledige voorbeeld:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Layout met absolute positionering</div>
<div id="nav">Navigatie</div>
<div id="main">Dit is het inhoudsgebied</div>
<div id="footer">Hier staan de auteursrechtinformatie.</div>
</body>
</html>En zo ziet het eruit in de browser:
Je kunt overigens de linker kolom eenvoudig naar rechts verplaatsen. Pas daarvoor de volgende instructies aan:
• Bij #nav wordt de waarde left: 0 gewijzigd in right: 0.
• Bij #main wordt margin-left eenvoudigweg veranderd in margin-right.
Na het opslaan van de wijzigingen wordt het gewenste resultaat weergegeven.
Een probleem dat de getoonde lay-out op basis van absolute positionering echter heeft: als de inhoud van de linkerkolom uitgebreider wordt, loopt deze door over het voettekstgebied.
Dit komt simpelweg doordat er voor absoluut gepositioneerde elementen geen ruimte "gereserveerd wordt". Dit probleem kan worden omzeild door in het hoofdgebied passende inhoud in te voegen die langer is dan die in de linker kolom.
Je zou deze lay-out vorm dus alleen moeten gebruiken als je zeker weet dat het hoofdgebied daadwerkelijk hoger is dan de linker (of rechter) kolom.
Een tweespalter met float
Het probleem met de overlappende voettekst dat zich voordeed in het vorige voorbeeld kan worden opgelost door het gebruik van de float-eigenschap. De aangepaste syntaxis ziet er als volgt uit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Layout met absolute positionering</div>
<div id="nav">Het gebied voor navigatie</div>
<div id="main">Dit is het inhoudsgebied</div>
<div id="footer">Hier staan de auteursrechtinformatie.</div>
</body>
</html>Hier zijn beide kolommen voorzien van de float-eigenschap. Hierdoor staan de kolommen nu naast elkaar.
Aan de linker kolom wordt een breedte van 20 procent toegewezen. Let vooral ook op dat een met float gepositioneerd element altijd een breedtevermelding verwacht.
Het eigenlijke inhoudsgebied krijgt een breedte van 80 procent. Ook dit gebied wordt gepositioneerd met float: left. Hierdoor wordt dit gebied naast de linker kolom weergegeven.
Om ervoor te zorgen dat het voetgedeelte daadwerkelijk altijd in het onderste venstergebied - dus onder de kolommen - te zien is, wordt de volgende syntaxis gebruikt:
#footer {
clear: both;
}
Ik had al gewezen op de mogelijkheid om een eigen klasse te definiëren voor deze variant.
Een driedespalter met float
Ook de driedespalter is in webdesign een geliefde variant. Een typische indeling ziet er dan als volgt uit:
• De linker kolom bevat de navigatie.
• In de middelste kolom staat de eigenlijke inhoud.
• Aan de rechterkant worden extra informatie of advertenties weergegeven.
Hieronder vind je een voorbeeld waarbij een flexibele driedespalter wordt gemaakt. De syntaxis is - zoals je snel zult merken - vrij vergelijkbaar met die van de eerder getoonde tweespalter. Maar nu is er met right een extra div-gebied dat uiteindelijk de rechtervensterspant vertegenwoordigt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout met absolute positionering</div>
<div id="nav">Het navigatiegebied</div>
<div id="main">Dit is het inhoudsgebied</div>
<div id="right">Dit is de rechterkolom</div>
<div id="footer">Hier staan de auteursrechtopmerkingen.</div>
</body>
</html>
De nieuwe sectie heeft een breedte van 20 procent gekregen. De opdeling ziet er dus als volgt uit:
• Linker- en rechterkolom nemen elk 20 procent van de beschikbare ruimte in beslag.
• De middelste kolom heeft een breedte van 60 procent.
Met de getoonde syntax wordt de right-sectie daadwerkelijk rechts weergegeven.
De syntax is echter flexibel op dit punt. Je zou de main-sectie ook als volgt kunnen aanpassen:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Hier werd float op right gezet. Hierdoor verplaatst de right-sectie zich naar links.
In deze tutorial heb je gezien hoe eenvoudig het is om basislay-outs te definiëren op basis van float. Deze kennis vormt nu de basis voor het opzetten van een website. In de volgende tutorials zal een website stap voor stap worden opgebouwd, te beginnen bij de structuur.
