Barrierefreie Navigation

CSS für Liste
(Schritt 2 von 10)

Bitte verwenden Sie die Zurück-Funktion Ihres Browsers (Alt + linke Pfeiltaste), um die vorherige Seite wieder aufzurufen.
Oder drücken Sie Alt + F4 um das Fenster zu schliessen.

Die Erläuterungen finden Sie in Struktureller Aufbau einer Navigationsleiste aus dem Beitrag "Das Rückgrat des Webauftrittes: Die Navigation".

Der HTML-Code

<div id="hauptnavigation">
<ul>
<li><a href="eintrag1.html">Eintrag 1</a></li>
<li><a href="eintrag2.html">Eintrag 2</a></li>
<li><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
</div>


Die CSS-Deklarationen

#hauptnavigation {
width: 13em;
background-color: #DFE1F0;
border: 1px solid #A9B0D7;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #2E3192;
font-size: 0.8em;
}

#hauptnavigation ul, #hauptnavigation ul li {
padding: 0;
margin: 0;
list-style: none;
}

#hauptnavigation a {
text-decoration: none;
display: block;
color: #2E3192;
}

* html #hauptnavigation a {
width: 100%;
}

#hauptnavigation ul li {
font-weight: bold;
border-bottom: 4px solid #A9B0D7;
}

* html #hauptnavigation ul li {
height: 1em;
}

#hauptnavigation ul li a {
padding: 6px;
}


Download

Ein komplettes Beispiel einer Navigation (3 Haupteinträge mit jeweils zwei Unterpunkten) samt CSS und Grafiken können Sie als ZIP-Datei herunterladen. (10 KB).