I eksempel 1 viste jeg, hvor let det er at lave en serie links om til en lodretstillet menu.
Før vi går videre med en flottere formatering af en sådan menu, vil jeg introducere html-listen som grundlaget for vore menuer.
En menu er jo netop en liste af links, så det er derfor naturligt (og fordelagtig i forhold til websidens maskinlæsbarhed) at bruge de html-markører, vi har til dette formål.
Disse markører er ol, ul og dl. De to første ligner hinanden meget, mens definitionslisten er mest egnet til links-fortegnelse, der kræver en forklarende tekst i forbindelse med linket.
Så godt som alle de menuer, jeg præsenterer i denne sektion, er baseret på den uordnede liste, jf. eksemplet herunder:
<ul class="menu2"> <li><a href="/">Forsiden</a></li> <li><a href="/gen/">Generelt/servicesider</a></li> <li><a href="/design/">Design</a></li> <li><a href="/css/">CSS (Stylesheets)</a></li> <li><a href="/javascript/">JavaScript</a></li> <li><a href="/navigation/">Navigation</a></li> <li><a href="/dhtml/">Dynamisk HTML</a></li> </ul>
Præsenteret på websiden ser denne menu således ud:
Formregelblokken for denne liste er:
ul.menu2 {margin:0 0 .5em 0;padding:0;list-style:none;}
Når det drejer sig om html-lister, er du altid nødt til at
kontrollere såvel padding som margin, og ikke kun når du bruger
listerne til disse formål. Her er alt nulstillet med undtagelse
af margin-bottom
på listen, der skaber lidt afstand
til den efterfølgende tekst.
De operative formregel er her list-style:none;
, der
fjerner listepunktmarkørerne.
I dette eksempel er det ikke nogen enkel sag at få linket til
at virke i hele det overordnede elements bredde. Ganske vist er
ul-markøren en blokmarkør og opfører sig som sådan, men li-markøren
er en sær en, der har sin egen display-værdi (list-item
).
Det har den praktiske betydning, at li-elementet kun bliver så bred
som indholdet tilsiger.
Og vi kan ikke blot give li-markøren display-egenskaben block, for så indsætter vi endnu et linieskift i menuen, i tilgift til det linieskift, li-markøren forårsager.
Løsningen er at gøre li-markøren til en inline markør og derefter igen lave a-markøren til en block-markør. Det fuldstændige stylesheet for en sådan menu sernu således ud:
ul.menu2 {margin:0 0 .5em 0;padding:0;list-style:none;} ul.menu2 li {display:inline;} ul.menu2 a {display:block;} * html ul.menu2 a {width:100%;}
Stjerne-hack'et sikrer som i eksempel 1, at kun IE læser den sidste linie. Om dette hack kan du læse mere i sektionen om CSS hacks
Webdesign - illustreret håndbog
Webdesign med XHTML
– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S