Formatering af listemenuen

Navigationsbjælke i fuld bredde

I eksempel 6 var den brede venstre margin på listepunkterne samt den hvide margin mellem punkterne ikke særlig hensigtsmæssig.

Desuden kunne jeg ønsker mig, at menuen spænder ud i hele websidens bredde. Det kan lade sig gøre på en sådan måde, at menupunkterne fylder hele bredden ud. Det er imidlertid ikke den letteste øvelse, så den gemmer jeg til de mere avancerede lektioner.

Foreløbig stiller jeg mig tilfreds med det blå bånd tværs over siden, med de syv menupunkter i en del af båndet.

Stylesheet'et til ovenstående udgave af menuen er:

ul.menu7 {
  padding: 3px 0; margin: 0 1.1em;
  border: 1px solid #bbc; 
  background: #dde;
  font-size:90%;  }
  
ul.menu7 li {
  list-style: none; 
  margin: 0;
  display: inline; }
  
ul.menu7 li a {
  padding: 3px 0.5em;
  border-right: 1px solid #bbc;
  text-decoration: none; }
  
ul.menu7 li a:link {
  color: #448;  }
  
ul.menu7 li a:visited {
  color: #667;  }
  
ul.menu7 li a:hover {
  border-color: #88C; 
  color: #000; 
  background: #aae;  }

Bemærkninger til stylesheet'et

Menuens rammekanter tegnes nu af ul-markøren, mens rammekanten om det enkelte menupunkt færdiggøres ved at sætte en border-right på hvert menupunkt.

Også her ser du det fænomen, jeg forklarede i eksempel 6, nemlig at et linieskift i kildekoden indsætter et mellemrum. Her sløres det af at baggrundsfarven på linket og på den ul, der rummer de enkelte li'er, er den samme. Men det ses tydeligt, når vi ved mouseover sætter en anden baggrundsfarve på linket.

Som i eksempel 6 er kuren mod dette at sætte alle li'erne på én linie.

Webdesign - illustreret håndbog
Webdesign med XHTML

– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S