Webdesign 101 » CSS » Formatering af HTML-lister

Vandrette lister som menuelementer

Når vi kan lave en vandret liste, er det nærliggende at undersøge, om ikke vi kan lave en sådan liste i form af en menu. Det er det, denne side handler om.

Jeg vender tilbage til mit udgangspunkt, den ganske almindelige uordnede liste:

Eksempel 10: 

Passende formateret efter de retningslinier, jeg skitserede på foregående side, kan en sådan liste komme til at se således ud:

Det stylesheet, der formaterer denne liste, ser således ud:

#menuliste1 {
  padding:0;
  margin:0;
  margin:10px 10px 25px 20px;
}
#menuliste1 ul {
  display:inline;
  margin:0;
  padding:0;
}
#menuliste1 ul li {
  
  display:inline;
  margin:0;
  padding:3px 5px 3px 5px;
  border:1px solid black;
  border-left:none;
  list-style:none;
  line-height:1.5em
}
#menuliste1 ul li.first {
  display:inline;
  margin-left:0;
  border-left:1px solid black;
  list-style:none;
}

Her er #menuliste1 en kasse, der omklamrer menuen. Formatet på denne er tildels bestemt af den sammenhæng, hvori den forekommer, her med en passende margin til teksten på siden i øvrigt. I de øvrige 3 stylesheets er de kritiske formregler markeret med rød skrift.

Hovedparten af formateringen ligger i listepunktet <li>. Her bestemmer jeg, at der ikke skal være noget linieskift efter <li> (display:inline;), at der ikke skal være nogen bullet (list-style:none;), og at der ikke skal være nogen venstre margin (for at sikre, at alle punkterne slutter op til venstre). Der sættes en border omkring listepunkterne, dog ikke til venstre, og ved hjælp af padding bestemmer jeg, hvor meget luft der skal være mellem border og listepunktets tekstindhold. Endelig bestemmer jeg en liniehøjde for teksten.

For ikke at få en dobbelt border mellem punkterne har jeg sat venstre border til 0 på alle listepunkterne. Men jeg skal jo have en border helt til venstre, i det første menupunkt. Det ordnes ved at give den en class="first" og oprette et stylesheet for denne instans af <li>.

Eksempel 11:

For at lave en navigationsbjælke ud af dette eksperiment, kan vi nøjes med at gøre teksterne til links, som det ses herunder:

Her har jeg indlagt en hover-effekt, som det hurtigt kan konstateres ved at føre musen hen over menupunkterne. (Det sker ved at oprette en formregel, der hedder a:hover {background-color: #rgb; color: #rgb;})

Jeg kan imidlertid hurtigt konstatere, at denne hover- eller rollover-effekt ikke ser alt for professionel ud. Det virker nemlig kun på linkteksten - eller, for at være helt præcis, på den tekst, der er omklamret af <a>...</a>. Inde i kassen ligger der imidlertid foruden teksten noget padding, der er knyttet til <li>-markøren, og dette område medtages ikke i min rollover, som det også tydeligt kan ses.

Eksempel 12: Vejen ud af dette dilemma er at formatere <a>-markøren i stedet for <li>-markøren, som jeg har gjort i eksemplet herunder.

Denne løsning er ok, som det ses. Jeg opnår den ønskede virkning. Der er dog en drilsk pudsighed ved denne løsning, som det tog mig et par timer at opdage. Den går ud på, at linieskift inde i listen, det vil sige en opstilling som denne:

<ul>
<li><a href="blank.htm">Menupunkt 1</a></li>
<li><a href="blank.htm">Menupunkt 2</a></li>
<li><a href="blank.htm">Menupunkt 3</a></li>
<li><a href="blank.htm">Menupunkt 4</a></li>
<li><a href="blank.htm">Menupunkt 5</a></li>
</ul>

... vil vise en menu som denne:

... det vil sige, med en venstre margin, der ikke skulle være der.

Eksempel 13:

Med fare for, at browserne i fremtiden fortolker HTML-koden 100% korrekt og derfor fjerne denne "uatoriserede" margin, kan du bruge den, hvis du ønsker de enkelte menupunkter skal være adskilt. Det drejer sig blot om at gøre rammen om hvert enkelt menupunkt hel, og fjerne den venstre border i den første knap:

Eksempel 14:

Det vil dog nok være sikrere og mere korrekt at sætte en sådan margin eksplicit, det vil sig med et stylesheet som dette, der laver fuldstændig den samme menu som i eksempel 13, men på en mere korrekt måde:

#menulist6 {
  padding:0;
  margin:10px 10px 25px 20px;
}
#menulist6 ul {
  display:inline;
  margin:0;
  padding:0;
}
#menulist6 ul li {
  display:inline;
  list-style:none;
  margin:0;
  padding:0;
}
#menulist6 a {
  text-decoration:none;
  padding:3px 5px 3px 5px;
  border:1px solid black;
  line-height:1.5em;
  margin:0;
  margin-right:5px;
}
#menulist6 a:link {color:#1a0080;background:#ffe;}
#menulist6 a:hover {color:#ffe;background:#1a0080;}

Resultatet ser du herunder. Det ville ikke være til at skelne fra eksempel 13, hvis det ikke lige var fordi, jeg peger på muligheden af at gøre menuknappen til en fane ved at oprette en class, .menulist6 a.her, der sætter border-bottom på en aktiv fane til baggrundsfarven. Der kan eksperimenteres mere med det. Det har jeg allerede gjort på websiden Fanebladsmenu, men ganske vist uden at oprette en sådan menu som en HTML-liste. Det var jo hele formålet med denne artikel.

Senest opdateret: 9. nov. 2002.