Indlæs andet indhold på denne side:
Siden er opdateret 27. 12. 2005
Med en mindre omskrivning af koderne ovenfor kan menuen bringes til at være vist vandret f.eks. i toppen af hver side. Først kigger vi på css:
a.vlink:link,a.vlink:visited,a.vlink:active{
font-family:verdana,arial,sans-serif;
color:#000000;
background:transparent;
font-weight:normal;
text-decoration: none;
font-size:11px;
padding:4px 14px 4px 14px;
font-weight:300;
}
a.vlink:hover {
background:blue;
color:white;
}
Læg mærke til, at der ikke er sat display:block, der er heller ikke sat en fast bredde på menupunkterne. Derimod er der sat padding på linkteksten: 4 px i toppen og bunden og 14 px i højre og venstre side.
Herunder viser jeg menuen i sin helhed. For overskuelighedens skyld har jeg indsat et linjeskift mellem hvert menupunkt, men det skal du ikke bruge.
Læg også mærke til, at der ikke er nogen omkring menupunkterne i denne version. Afstanden mellem menupunkterne styres til 2 × 14 px af den padding, der i css er sat på menuklassen vlink.
<a href="side1.htm" class="vlink">Side 1</a>
<a href="side2.htm" class="vlink">Side 2</a>
<a href="side3.htm" class="vlink">Side 3</a>
<a href="side4.htm" class="vlink">Side 4</a>
Du skal selvfølgelig også have lov til at se menuen i funktion - dvs. der er ikke nogen aktive links, jeg har erstattet adresserne med et #.
Som ved den lodrette menu er vi nødt til at hjælpe Opera lidt. Vi tilføjer style="padding:4px 14px 4px 14px" til hvert enkelt menupunkt:
<a href="side1.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 1</a>
<a href="side2.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 2</a>
<a href="side3.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 3</a>
<a href="side4.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 4</a>