Webdesign 101
- en webdesign notesblok

• Forsiden
• » Navigation
• » CSS menuer
• » Grundlæggende /8

Formatering af listemenuen

Fanebladsmenu

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:

.menu8 {
  padding: 3px 0; 
  margin: 0;
  padding-left:1em;
  border-bottom: 1px solid #778;
  font-size:90%;}
  
.menu8 li {
  list-style: none; 
  margin: 0;
  display: inline;}
  
.menu8 li a {
  padding: 3px 0.5em; 
  margin-left: 3px;
  border: 1px solid #778; 
  border-bottom: none;
  background: #dde;
  text-decoration: none;}
  
.menu8 li a:link {
  color: #448;}
  
.menu8 li a:visited {
  color: #667;}
.menu8 li a:hover {
  color: #000; background: #aaa;
  border-color: #227;}
  
.menu8 li a#aktuel {
  background: white; 
  border-bottom: 1px solid white;}
 

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.