CSS three column lay-outs

door: Joriso

Hier vind je enkele praktische voorbeelden van CSS - gebaseerde 'three column website lay-outs'. De 'drie kolommen lay-out' is een populair design waarmee verschillende soorten content over een webpagina te verdelen zijn zonder de overzichtelijkheid te compromitteren.

CSS versus table

Discussies over CSS-P versus tabellen neigen vaak oververhit te raken. Een toekomstig wereldwijd web waarin lay-out puur op CSS-code gebaseerd zal zijn, is voor W3C aanbidders een utopie waarover met aan religieus fanatisme grenzende passie eindeloos over kan worden doorgeboomd. Veelgehoorde argumenten voor het gebruik van CSS-Positioning ipv tabellen zijn o.a.:

CSS-P lay-outs zijn zoekmachine vriendelijker dan table gebaseerde lay-outs
CSS-P lay-outs zijn flexibeler en eenvoudiger te wijzigen
CSS-P lay-outs zijn efficienter / gebruiken minder bandbreedte dan tabel gebaseerde lay-outs
CSS-P lay-outs web lay-outs worden sematischer opgebouwd doordat tags, class en id namen de functionaliteit van stukken content aanduiden
tabellen zijn volgens het W3C nooit bedoeld geweest als lay-out - tool, maar enkel als container van data

Deze e.a. argumenten voor CSS versus de tabel zijn aan veel discussie onderhevig. Een voorlopige conclusie is om tabellen niet uit te sluiten in situaties waar ze meer functionaliteit leveren dan CSS. Uiteindelijk hangt het succes van een site vooral af van de aanwezige content, en is het gebruik van tabel of CSS gebaseerde lay-out van marginaal belang. Maar naarmate de CSS ondersteuning van grote browsers als Firefox, Internet Explorer, Netscape en Safari meer naar elkaar toe groeit zal lay-out wl. steeds meer op CSS gebaseerd worden.

Three column lay-out - CSS en table

De three column lay-out is dmv de table tag simpel op te zetten. Ook met CSS is de 3column lay-out door verschillende CSS coderingen simpel te reproduceren, hoewel browser - CSS (in)compatibiliteiten vaker een rol spelen.

In CSS kan de three column lay-out op vele manieren worden nagebootst. Elke CSS lay-out heeft nadelen en voordelen. Problemen met CSS lay-outs ontstaan doordat Firefox, Netscape, Internet Explorer, Safari, Opera, etcera, CSS code net iets anders interpreteren. Microsoft Internet Explorer wordt vaak gezien als grote boosdoener omdat deze schaamteloos de CSS standaarden van het W3C lijkt te negeren.

Er is geen 'beste' methode voor de drie-kolommen lay-out in CSS. Verschillende CSS coderingen werken in verschillende contexten.

Op de volgende pagina vind je enkele voorbeeld CSS lay-outs.

_{Pagina 1 van 2}
1 |2| volgende»

Naam:
Link:^{(niet verplicht)}
Commentaar:
^{<-- code:}