Webtrucs
Weg met de table, leve de div
Voor deze website is zo veel mogelijk gebruik gemaakt van CSS-positionering. Daarmee is hij zo veel mogelijk ‘toekomstvast’.
In de eerste tien jaar van het internet werden webpagina’s zoals deze gebaseerd op een <table>. Die bood de handigste mogelijkheden om het vlak te verdelen in verschillende onderdelen. Maar eigenlijk is dat geen goed gebruik van een <table>: die is alleen bedoeld voor echte tabellen, staten dus.
De laatste tijd bepleiten webgoeroes dan ook dat HTML-pagina’s moeten worden ingedeeld met behulp van de positioneringsmogelijkheden van Cascading Style Sheets (CSS). Dat kon lang alleen in theorie, omdat de gangbare browsers de CSS-codes op alle mogelijke manieren verkeerd interpreteerden.
De door de internetorganisatie (W3C, World Wide Web Consortium) vastgestelde standaarden werden halfslachtig of helemaal niet gevolgd. Vooral Internet Explorer bakte weinig fraais van pagina’s met CSS, maar Netscape kon er ook wat van. Omdat iedere browser weer andere eigenaardigheden had, moesten er allerlei trucs in webpagina’s worden ingebouwd om te zorgen dat ze er overal enigszins fatsoenlijk uit kwamen.
Hoop
Op dat vlak valt nog steeds veel te verbeteren, maar sinds versie 6.0 van Microsoft Internet Explorer uit is, gloort er hoop. Aan die browser mankeert nog steeds verschrikkelijk veel, maar het begint mogelijk te worden webpagina’s te maken op basis van CSS-positionering.
Voor wie een webpagina op een normale manier bekijkt, maakt het niet veel uit of hij met een <table> is opgebouwd, of met positionering.
Maar voor wie een pagina ontwerpt of onderhoudt, is het veel eenvoudiger. Was voorheen de inhoud volkomen vervlochten met opmaakcodes, nu zijn vorm en inhoud veel meer gescheiden. Je kunt de vorm veranderen, zonder aan de inhoud te komen, en omgekeerd.
Alleen div
Deze pagina bijvoorbeeld bestaat in wezen alleen uit een paar <div>’s:
<body>
<div class="content">
<div class="masthead">
... de logo’s bovenin ...
</div>
<ul class="xmenu">
... het menu ...
</ul>
<div class="kolommen">
<div class="verhaal">
... deze tekst ...
</div>
<div class="ladder1">
... de links ...
</div>
<div class="ladder2">
... 'Kies een andere stijl' ...
</div>
</div>
<div class="voet">
... de afsluiting ...
</div>
</div>
</body> Nergens in de pagina staat hoe de <div>’s moeten worden afgebeeld. Dat gebeurt allemaal in de afzonderlijke CSS-stijlregels. Daarin staan de grootte en kleur van de letters, de margin’s en padding’s van de verschillende onderdelen, en ook hoe de onderdelen op de pagina geplaatst moeten worden:
.kolommen {
position: relative;
height: 100%; }
.verhaal {
position: relative;
left: 9.5em;
width: 36.9em; }
.ladder1, .ladder2 {
position: absolute;
left: 0;
width: 8.5em; }
.ladder1 {
top: 0; }
.ladder2 {
bottom: 0; } Zou je bij nader inzien de ladder niet aan de linkerkant van de pagina willen hebben, maar aan de rechterkant, dan hoef je maar twee dingen in de stijlregels te veranderen (of eraan toe te voegen, zodat ze worden overschreven):
.verhaal {
left: 0; }
.ladder1, .ladder2 {
left: 36.9em; } Probeer dat maar eens met een <table>: die zou je helemaal moeten ombouwen om hetzelfde effect te bereiken.
Dynamisch
Een groot voordeel van CSS-positionering boven tabellen is dat je de indeling van de pagina dynamisch kunt veranderen. Over het algemeen dien je daarmee natuurlijk terughoudend te zijn, maar het komt zeer te pas bij bijvoorbeeld menu’s.
Het menu van deze website is op positionering gebaseerd, en niet op de afschuwelijke Javascript-codes die tot dusver gebruikelijk zijn. Ik heb ook een tamelijk vernuftige ‘fotoshow’ op basis van CSS gemaakt, al zeg ik het zelf.
Het vergt enige studie en gewenning om CSS-positionering onder de knie te krijgen, vooral omdat de termen ‘relative’ en ‘absolute’ wat ongelukkig gekozen zijn (‘absolute’ is eigenlijk ook nogal relatief), maar er zijn verschillende plaatsen op het net waar het goed wordt uitgelegd.