Vroeger werden tabellen gebruikt om de verschillende onderdelen van een website te plaatsen. Header, navigatie, footer, inhoud enzovoort kregen allemaal een plaatsje in een tabelcel. Met de komst van XHTML en CSS 2 zouden we zulke praktijken niet meer te zien mogen krijgen.

Tabellen worden immers gebruikt om tabulaire data weer te geven en dienen niet voor lay-outdoeleinden.

In XHTML gaan we de lay-out volledig overlaten aan CSS. Dit betekent dat we de verschillende onderdelen op zijn plaats moeten gaan krijgen door deze te positioneren. Om dit gemakkelijk te doen moet je eerst je webpagina onderverdelen in de grote delen en bedenken waar zij ergens op het scherm moeten geplaatst worden.

Elk onderdeel van de webpagina plaatsen we in een "container". De <div>-tag is hiervoor ideaal. Algemeen gesproken krijgen we dan zoiets:

Aan elke <div> hebben we een class gehangen zodat we in een stijlbestand de nodige opmaak kunnen stoppen.

Maak dus een nieuw stijlbestand. We veronderstellen in dit voorbeeld dat het menu aan de rechterkant komt en de content links.

We beginnen met de code voor de header. In onze header zetten we een afbeelding, ook wel banner genoemd of een achtergrondafbeelding. We zijn verplicht om de hoogte van de banner op te geven, anders zullen we deze niet te zien krijgen. De rest van de code spreekt voor zich.

Het menu willen we aan de linkerkant weergeven zoals gebruikelijk. We geven aan hoe breed het menu is en aan welke kant het moet verschijnen.

Het gebied waarin de inhoud moet komen hoeft niet veel code:

Stel hier de juiste paddingmarges in; de tekst mag beginnen op 160 px omdat de navigatie al 150 pixels in beslag neemt. De volgorde van de waarden is top - right - bottom - left. Je kunt dit gemakkelijk onthouden met het woord "TRouBLe" als geheugensteun.

De footer maak je op naar je eigen smaak.

Je merkt dat het element clear is toegevoegd. Omdat we opgegeven hebben in het menu dat dit links moet staan (float: left;) moeten we aangeven dat die linkse uitlijning moet stoppen en dat de div footer eronder moet beginnen. Anders bestond het gevaar dat de footer naast het menu ging verschijnen. Dit probleem is bij deze voorzien en opgelost.
Wanneer je het menu rechts zou uitlijnen (float: right;) moet je in de footer het element clear van de waarde right voorzien.
Gebruik je div's met een uitlijning van zowel rechts en links, moet je clear de waarde both meegeven.

Niets weerhoudt je ervan om ook andere opmaakelementen te koppelen aan de classes content, menu en header.
Iets niet duidelijk? Bekijk het concreet uitgewerkte voorbeeld.

Ga naar het laatste deel van de CSS basiscursus : Stylesheets toepassen op verschillende media