Formatering af listemenuen

Navigationsbjælke

Når der ses bort fra de ændringer i denne eksempelsides layout, som er nødvendiggjort af eksemplet, er ændringen af vor menu fra et panel til en navigationsbjælke forbavsende let. Tre formregler skal fjernes (røde i stylesheet'et herunder) og to skal tilføjes (grøn i stylesheet'et herunder).

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

ul.menu6 {
  padding: 0 1px 1px 1px; 
  margin: 0;
  background: gray; 
  font-size:90%;
  width: 15em;}
ul.menu6 li {
  list-style: none; 
  margin: 0; 
  border-top: 1px solid gray;
  text-align: left;
  display: inline;}
ul.menu6 li a {
  display: block; 
  _width:12.75em;
  padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #aab; 
  background: #ccd;
  text-decoration: none;}
ul.menu6 li a:link {
  color: #448;}
ul.menu6 li a:visited {
  color: #667;}
ul.menu6 li a:hover {
  border-color: #fe3; 
  color: #fff; 
  background: #332;}

Bemærkninger til stylesheet'et

Som det gerne skulle foregå af ovenstående er “hemmeligheden” bag denne navigationsbjælke den, at li-elementets display-værdi ændres fra list-item (som er en afart af block-værdien, og som derfor indsætter linieskift) til inline.

Du ser i denne konstruktion en “fejl”, der er fælles for alle browsere, nemlig at browseren tolker et linieskift i kildekoden som et mellemrum. Det er det, der skaber den hvide margin mellem menupunkterne.

Remediet mod dette er i denne konstruktion at fjerne linieskiftet, det vil sige sætte alle li'erne på én linie.

Nu er det jo ikke sikkert at det design, som virker udmærket som menupanel, også gør sig i en navigationsbjælke. På de følgende eksempelsider præsenterer jeg derfor et par alternativer.

Webdesign - illustreret håndbog
Webdesign med XHTML

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