CSS für Listen

Grundlegender Code

Eine einfache Liste soll als Navigationselement dargestellt werden. Ohne zusätzliches CSS sieht die Liste so aus:

Quelltext

<ul>
<li><a href="http://www.spd.de">spd.de</a></li>
<li><a href="http://www.websozis.de">websozis.de</a></li>
<li><a href="http://harald-kampen.de">Harald Kampen</a></li>
</ul>

Vorschau

CSS-Klasse oder ID hinzufügen

Damit die Liste gestaltet werden kann, muss die Liste gekennzeichnet werden. In diesem Beispiel wird die ID navigation verwendet. <ul> ändert sich in <ul id="navigation">.

Quelltext

<ul id="navigation">
<li><a href="http://www.spd.de">spd.de</a></li>
<li><a href="http://www.websozis.de">websozis.de</a></li>
<li><a href="http://harald-kampen.de">Harald Kampen</a></li>
</ul>

CSS für die Liste

Die typischen Eigenschaften von HTML-Listen will ich für die Navigationsliste nicht verwenden. Dazu gehören die Einzüge und die Aufzahlungszeichen. Außerdem muss ein CSS-Bug im Internet Explorer verhindert werden, der eine Leerzeile nach den Listenelementen erzeugt. Das erreiche ich, indem ich <li> die Eigenschaft display: inline zuweise. Die gesamte Breite der Liste wird benötigt, wenn das Elternelement keine Breitenangabe hat.

CSS-Code

#navigation, #navigation li {
margin: 0;
padding: 0;
}

#navigation li {
list-style-type: none;
display: inline;
}

CSS für die Links in der Liste

Mit der CSS-Eigenschaft display: block kann ich die Links optimal gestalten. Hintergründe, Textausrichtung oder Rahmen reichen über die gesamte Zeile. Für die Links können auch Abstände eingegeben werden.

#navigation a {
display: block;
padding: 3px;
background: #009;
color: #ff9;
text-decoration: none;
}

#navigation a:hover {
background: #ff9;
color: #009;
}

Beispiel

Fazit

Die eigendliche Gestaltung findet erst für die <a>-Tags statt. Die Ausgabeeigenschaften für die Listenelemente werden lediglich zurückgesetzt.