En service fra www.thisisntrocketscience.dk:

Et eksempel på en side lavet med ét stylesheet – helt uden tabeller...

Det, du ser her, er en side med dropdown-menuer, der skifter farve, hvis man går ind på en underside. Du kan se, hvordan det virker, ved at gå ind på side 2 oppe i menuen. Desuden er der plads til et fast logo og nogle faste menupunkter.

I stedet for at have et lidt kikset tekstlogo (som her), kan du bare sætte et billede ind i den del af stylesheetet, der styrer logomenuen. Det har jeg fx brugt på siden Scandinavian Society for Modern Greek Studies.

Siden er lavet så den er synlig for brugere med en skærmopløsning på 800*600px, svarende til en skærm på femten tommer. Hvis brugeren har en større skærm end det, bliver den vist som midtercentreret.

Egentlig er jeg ikke nogen stor tilhænger af dropdown-menuer, men det var det, designerne ville have, så sådan blev det.

Jeg lavede siden, da jeg skulle lave noget kode til www.totalent.dk og ikke kunne få dropdown-menuen til at virke. Jeg brugte ellers en sjov kombination af javascript, frames, tabeller, spacer-giffer og andre finurligheder. Eller rettere: Det kunne godt lade sig gøre at lave dét, som kunden ville have, men så blev det kun synligt for brugere af Internet Explorer. Alle andre brugere ville ikke kunne bruge siden.

Jeg har ændret koden lidt siden dengang, så nu er det xhtml (før var det html). Siden validerer både css og xhtml, hvilket sagt på lidt mere jordnært dansk betyder, at alle browsere, der er lavet ordentligt, skulle kunne vise siden præcis på den måde jég vil have det. Der er dog lidt snask med padding (indrykning af ord) i menufeltet, hvis man ser den via Netscape/Mozilla, men det hører til i småtingsafdelingen, vil jeg mene. Uanset hvad, er det noget jeg nok skal få rettet snarest.

Selve siden er testet i

Windows 98, 2000 og XP – diverse udgaver af Internet Explorer, Opera og Netscape/Mozilla
Mac OS 9.2.x og OSX – Internet Explorer og Safari
Gnome 1.4 (linux) – Mozilla.

Jeg har lavet stylesheetet ved at kombinere to teknikker fra theimposter.org og bluerobot.com, selvom jeg vil tillade mig at mene, at mit resultat ser lidt mere funky ud end forlægget :)

Hvis du ikke går så meget op i validering af sider, kan du i stylesheetet få farvede scrollbars ved at slå den funktion til i stylesheetet. Det bliver kun vist i Internet Explorer til Windows, men det er en meget smart grafisk detalje, og gør ikke livet surt for andre brugere.

Jeg har skrevet nogle kommentarer ind i koden i stylesheetet, men hvis der er noget, der er helt sort, hvis du finder en fejl, eller hvis du gerne vil have noget rettet, så skriv endelig til mig.

Hvis du gerne vil fifle med koden, kan du downloade index, side 2 og stylesheetet i en zip-fil.