Formatering af listemenuen

Menutræet venstrestillet

Foretrækker du en venstrestillet menu, måske fordi du gerne vil have den i en venstrestillet menuspalte, skal der kun ganske få ændringer til for at opnå dette.

Disse ændringer er markeret med rødt i stylesheet'et for menuen herunder:

#menu9 {
  position:relative;
  padding: 0; 
  margin: 2em 0 0 0;
  font-weight: bold;
  font-size:12px;
  font-family:arial,verdana, sans-serif;
  width: 11em;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: gray; }
  
#menu9 li {
  list-style: none; 
  padding: 0; 
  margin: 0.5em 0;
  text-align: right;}
  
#menu9 li a {
  padding-left: 0.5em;  
  border-bottom: 1px solid gray;
  text-decoration: none;}
  
#menu9 li a:link {
  color: #448;}

#menu9 li a:visited {
  color: #667;}

#menu9 li a:hover {
  border-color: red; 
  color: #000;}

#menu9 h4 {
  display: inline; 
  margin: 0; 
  padding: 1px 0.33em;
  position: relative; 
  top: -1em; 
  font-size: 1.1em;
  background: white; 
  border: 1px solid gray;}

#menu9 #title {
  text-align: right;} 

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