Nyt layout

Et af mine sommerferieprojekter har været at få kigget lidt på min egen hjemmeside, som jeg har forsømt en del det seneste år (seneste blog-indlæg er fra november sidste år – pinligt …!).

Én af de ting, der stod øverst på min todo-liste var at få lavet et nyt design til siden. Som den kodenørd jeg er, skal designet naturligvis være fuldt skalérbart, crossbrowser-kompatibelt og selvfølgelig kun benytte valid kode.

Resultatet sidder du og kigger på nu. Det er bygget op omkring den såkaldte "wrapper-free Holy Grail"-kode fra www.alistapart.com – en kode, der giver et fuldt skalérbart layout med tre kolonner, sidehoved og sidefod, og som også virker i Internet Explorer!

Indhold og layout er så vidt muligt adskilt i hhv. html-dokumenter og css-stylesheets. Det gør det meget nemmere at ændre/tilpasse layoutet fremover, og en anden bonus er, at man nemt kan skifte hele layoutet på siden uden at skulle ændre i html-koden – man indlæser blot siden med et andet stylesheet.

Som den opmærksomme læser måske har bemærket, så har min side i et stykke tid været udstyret med en funktion, der kan gøre netop dette – den er der stadig, og kan nu findes lige under menuen (“Vælg layout”). Her finder man noget der ligner det gamle layout (“Maroon”) samt en sort/hvid-version.

Er man til den slags hjemmeside-gadgets, så bør man slå et slag forbi www.csszengarden.com, som er et ekstremt eksempel på, hvad man kan opnå ved at holde indhold og layout hermetisk adskilt: På siden kan man vælge mellem oceaner af forskellige layouts, men finten er, at de alle bygger på nøjagtig de samme html-dokumenter. Hvert eneste element på siden har sit eget id, og dermed kan man vha. stylesheets få dem til at se ud præcis som man ønsker det – det er ret imponerende!

Så langt kommer jeg nok aldrig med denne side, men du skal da være velkommen til at lægge en kommentar til det nye layout.



Skriv svar

XHTML: Du kan benytte disse tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>