Na aandachtig het help bestand over het gebruik van de Blogger template tags bestudeert te hebben ben ik begonnen aan het creeeren van een eigen look-and-feel voor deze website. Uitgangspunt voor het ontwerp was dat het er goed uit dient te zien onder de laatste versie van Mozilla (momenteel: 1.6) en onder Microsoft Internet Explorer (versie 6 SP1).
Voor het ontwerp is gekozen voor een vloeibaar ontwerp (liquid design). Dit betekent dat de pagina meeschaalt met de resolutie van de gebruiker. De website zelf is ontworpen op een 1280x1024 schermresolutie, maar ziet er in dit geval op 1024x768 ook nog steeds uit zoals ik dit bedacht had. In het ontwerp worden geen tabellen gebruikt voor de positionering maar wordt volledig op CSS-2 vertrouwd.
Het website ontwerp gebruikt een twee kolommen opzet. De realisatie hiervan is nog niet zo gemakkelijk. Het heeft mij ook de nodige uurtjes gekost voordat ik het goed had. Het is daarom begrijpelijk dat menig website ontwerper nog steeds naar tabellen grijpt voor de positionering van elementen. Echter in het kader van het scheiden van content en opmaak is dit niet meer van deze tijd en hoor je eigenlijk CSS te gebruiken.
Als inspiratie bron voor het vloeibare ontwerp en de bijbehorende CSS code heb ik gebruik gemaakt van het goede A List Apartartikel 'Retooling Slashdot with web standards'. Als je op Google zoekt naar "CSS two columns" vind je nog meer oplossingen voor het maken van twee of meerdere kolommen met behulp van CSS.
Reacties