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;}
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