Van tabellen naar 'positioning'

Absolute en Float

Katinka Hesselink 2006

In het artikel over codeer-volgorde heb ik uitgelegd waarom het handig is om het menu onderaan de code te plaatsen. Het voorbeeld dat ik daar gaf ging uit van float's als lay-out methode. In dit artikel ga ik uit van de methode van absolute plaatsing die ik ook op deze site gebruik. In ouderwetse HTML, waar layout alleen met tabellen opgelost kan worden, zou een layout als die op deze pagina een ingewikkelde tabel geworden zijn. De precieze verhouding van de koppen zou ik daarmee niet kunnen reproduceren. Ik heb dan ook geen tabellen, maar CSS-positionering gebruikt.

De basis: absolute positioning

De ordening van de pagina ziet er in dit voorbeeld als volgt uit: een simpele linker kolom voor het menu (en eventueel andere zaken) en een brede rechter kolom voor de inhoud. Precies als deze pagina zelf dus. 

<div id="main">
<h1></h1>
<p></p>
</div>
<div id="menu">
<ul><li></li></ul>
</div>

Het positioneren is uiteindelijk niet zo ingewikkeld: de css ziet er als volgt uit:

#main {position: absolute;
width: 70%;
max-width: 35em;
left: 14em;
top: 0;}
#menu {position: absolute;
width: 13em;
left: 2px;
top: 0;

Essentieel hier is de eerste declaratie bij elk element: position: absolute . Daarmee geef ik aan dat deze elementen (div's in dit geval) niet geplaatst worden op grond van de volgorde in de code, maar op grond van de informatie die volgt. Dit kan informatie zijn over de breedte ( width ) van het element, over hoe ver de linker rand ( left: 2px )van het element gepositioneerd wordt ten opzichte van het element er omheen (containing element in het Engels; in dit geval <body> ), en hoe ver de rechter rand af moet staan van de rechter rand van het element er omheen. 

Omdat IE moeilijk doet als de breedte van een element niet is opgegeven, is het in de praktijk handig of left of right en daarbij top aan te geven. Doordat ik in beide gevallen met left werk, zijn de elementen ten opzichte van elkaar duidelijk gepositioneerd: er zit 1em tussen, om precies te zijn. Dit is een voorbeeld van een elastische layout. Dat IE max-width niet op pikt is jammer, maar desondanks wordt ook voor de gemiddelde bezoeker van de website het menu breder als het lettertype groter wordt: probeer dat vooral uit!

Float's toegevoegd

Een volgende stap is het plaatsen van float's binnen de absoluut gepositioneerde kolommen. Dit heb ik op de voorpagina van Katinka Hesselink Net gedaan:

#home div.links, #home div.rechts
{width: 49%;
padding: 0;
margin: 10px 0;}

#home div.links
{float: left;}
#home div.rechts
{float: right;}

De regels beginnen met #home omdat de drie pagina's waar dit voor geldt de volgende body tag hebben:

<body id="home">

Dit zorgt ervoor dat deze stijl alleen op die drie pagina's toegepast wordt. Vervolgens zijn er op deze pagina's een of meerdere div's die een class 'links of rechts hebben:

<div class="links">
</div>

Dit werkt op de voorpagina anders uit dan op de andere pagina's, maar dat mag je zelf uitzoeken door naar de code te kijken.