Site-Navigation mit Listen, Beispiel 18a
Das Style-Sheet sieht so aus:
body {
font-size: 15px;
color: #000;
background-color: #393;
padding: 0;
margin: 0;
}
#maincontent {
background-color: #f6ffff;
padding: 1em;
border-left: 1px solid #909;
margin: 0 0 0 174px;
}
#navigation {
background-color: transparent;
position: absolute;
top: 7px;
left: 7px;
}
#navigation LI {
background-color: transparent;
padding: 0;
margin: 0;
list-style: none;
width: 168px;
}
#navigation UL {
background-color: transparent;
padding: 0;
margin: 0;
}
#navigation A {
font: bold 1em sans-serif;
color: #000;
text-decoration: none;
display:block;
padding: 3px 4px;
border: 1px solid #909;
margin: 2px 0 0 10px;
width: 148px;
}
#navigation A:link,
#navigation A:visited {
background-color: #9c9;
padding: 3px 4px;
}
#navigation A:hover,
#navigation A:focus {
background-color: #ded;
padding: 3px 4px;
}
#ia #navigation A.ca,
#ib #navigation A.cb,
#ic #navigation A.cc,
#id #navigation A.cd {
background-color: #f6ffff;
padding: 3px 4px 3px 8px;
border-left: 7px double #909;
margin: 2px 0 0 0;
}
Das HTML der Seite sieht so aus:
<html>
<head></head>
<body>
<div id="ia"><div id="navigation">
<ul>
<li><a class="ca" title="Grundlagen"
href="/examples/listnav-18a.html">Grundlagen</a></li>
<li><a class="cb" title="Referenz"
href="/examples/listnav-18b.html">Referenz</a></li>
<li><a class="cc" title="Tutorials"
href="/examples/listnav-18c.html">Tutorials</a></li>
<li><a class="cd" title="Browsers"
href="/examples/listnav-18d.html">Browsers</a></li>
</ul>
</div></div>
<div id="maincontent"></div>
</body>
</html>