HTML-liste som menu

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