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:
Introduktion
Indre planeter
Asteroiderne
Ydre planeter
Kometskyen
Introduktion
Indre planeter
Asteroiderne
Ydre planeter
Kometskyen
Introduktion
Indre planeter
Asteroiderne
Ydre planeter
Kometskyen
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;}