Webdesign 101
Kildekode til Webdesign – illustreret håndbog (2. udg.)

• Forsiden
• » Webdesign – illustreret håndbog
• » Kildekode

Figur 16-7: HTML-lister som menuer

Det ser du på skærmen:

HTML kildekoden:

<ul class="normal"> <li><a href="javascript:void(null)">Introduktion</a></li> <li><a href="javascript:void(null)">Indre planeter</a></li> <li><a href="javascript:void(null)">Asteroiderne</a></li> <li><a href="javascript:void(null)">Ydre planeter</a></li> <li><a href="javascript:void(null)">Kometskyen</a></li> </ul> <ul class="vandret"> <li><a href="javascript:void(null)">Introduktion</a></li> <li><a href="javascript:void(null)">Indre planeter</a></li> <li><a href="javascript:void(null)">Asteroiderne</a></li> <li><a href="javascript:void(null)">Ydre planeter</a></li> <li><a href="javascript:void(null)">Kometskyen</a></li> </ul> <ul class="navbar"> <li><a href="javascript:void(null)">Introduktion</a></li ><li><a href="javascript:void(null)">Indre planeter</a></li ><li><a href="javascript:void(null)">Asteroiderne</a></li ><li><a href="javascript:void(null)">Ydre planeter</a></li ><li><a href="javascript:void(null)">Kometskyen</a></li> </ul>

Stylesheet kildekoden:

ul.vandret { margin-left:20px; padding:0; list-style:none; margin-top:20px; } ul.vandret li { display:inline; } ul.navbar{ font-size:90%; border-width:1px 0 1px 1px; border-style:solid; border-color: #257; float:left; padding:0; list-style:none; margin-left:20px; } * html ul.navbar {margin-left:10px;} ul.navbar li { display:inline; } ul.navbar li a { float:left; margin:0; padding:3px 5px 3px 5px; border-right:1px solid #257; color:#1a0080; background:#fff; text-decoration:none; } ul.navbar li a:hover { color:#fff; background-color:#1a0080; } span.clear {clear:left;}