Table: Drie kolommen - fluid
Wanneer een of meerdere kolommen in de three column lay-out zich aanpassen aan de breedte van de browsers viewport spreekt men van een 'fluid' of wel vloeibare lay-out. Met de goede oude tabel komt dit neer op een eenvoudig stukje code, dat in vrijwel geen enkele browser problemen veroorzaakt:
Table gebaseerde - 3 kolom lay-out:
<table>
<tr>
<td width="200">menu in linkerkolom</td>
<td width="100%"><h1>blabla</h1> Hoi dit is de middenkolom </td>
<td width="200"> onzin in rechterkolom </td>
</tr>
</table>
De meeste CSS gebaseerde drie kolom lay-outs zijn afgeleid van een van de onderstaande principes:
3 column fluid CSS lay-out gebaseerd op 'position'
Deze three column lay-out is gebaseerd op de CSS 'position:absolute' eigenschap. Met deze CSS eigenschap wordt de positie op de pagina aangegeven met absolute 'coordinaten' gerelateerd tot de zijkanten van het browser window. In het onderstaande voorbeeld zijn alle drie kolommen 'vloeibaar' - d.w.z. ze passen zich aan aan de breedte van de viewport.
Klik hier voor een voorbeeld van deze CSS lay-out
Voorbeeld CSS / HTML code:
Voorbeelden van variaties op deze CSS three column lay-out:
3 column fluid CSS lay-out gebaseerd op floats
Een veelgebruikte CSS eigenschap om 3 kolommen te positioneren is 'float'. De float eigenschap geeft aan waar een plaatje of tekst zich bevindt in een ander element. In dit CSS voorbeeld 'float' de ene kolom naar rechts en de andere naar links.
klik hier om deze deze CSS lay-out te zien
Drie kolommen - 'Fixed width'
Voor sommige CSS lay-outs kan het handig zijn de drie kolommen een gefixeerde waarde te geven door de CSS 'width' eigenschap. Hieronder een voorbeeld.
Zoekmachine optimalisatie?
Aangezien de belangrijkste 'content' van je webpagina meestal in de middenkolom staat, staat deze idealiter ook bovenaan in de html pagina zodat zoekmachines deze content als eerste lezen.
In het onderstaande CSS 'fixed-width' voorbeeld worden linkerkolom en middenkolom in een afzonderlijke div gezet en dmv float omgedraaid. De 'content' bevattende div staat daardoor bovenaan de html pagina en zoekmachines zullen deze tekst als het relevantst voor de pagina beschouwen.
Deze 'zoekmachine optimalisatie' is uiteraard niet gebonden aan deze CSS - lay-out, en kan dus ook op bovenstaande CSS lay-outs worden toegepast.
Klik hier voor een voorbeeld van deze lay-out
Bedankt voor alle info over webdesign e.d. op jou site. Om als redelijk beginner alles beter te kunnen begrijpen heb ik jou site volledig ingeladen met Frontpage 2003. Een paar vragen die bij mij opkomen en die je misschien wel wilt beantwoorden zijn: Waarom is de index in php-extentie?
Als ik 'm locaal herbenoem naar htm(l) veranderd er naar mijn idee niets. Laad php misschien sneller?
En wat is de gedachte erachter om één pagina "card" zowel in php als in html te publiceren? Misschien enerzijds sneller laden (php) en anderzijds zoekmachine vriendelijkheid (htm(l))?
Ben benieuwd. Alvast bedankt voor je reactie.
Groet, Aad.