Site-Navigation mit Listen, Ausgangsbeispiel
Das Style-Sheet sieht so aus:
body {
padding: 0;
margin: 0;
}
P {
margin: 0 1em;
padding: 0.4em 0;
}
.code {
font-size: 0.8em;
background-color: #eee;
color: #333;
padding: 0.5em;
margin: 0.5em;
}
.code pre {
color: #333;
background-color: #f8f8f8;
padding: 0.5em;
}
.code pre em {
color: #920;
}
#maincontent {
color: #000;
background-color: #eee;
padding: 1em;
border-left: 1px dotted #ccc;
margin: 0 0 0 200px;
}
#navigation {
background-color: #b6e;
position: absolute;
top: 0;
left: 0;
}
Das HTML der Seite sieht so aus:
<html> <head></head> <body> <div id="navigation"> <ul> <li>Grundlagen</li> <li>Referenz</li> <li>Tutorials</li> <li>Browser-Support</li> </ul> </div> <div id="maincontent"></div> </body> </html>