CSS und Design von Listen mit <ul>, <ol> und <li>

Wir haben das Listenelement für durchnummerierte Listen und Listen mit Aufzählungszeichen in HTML mit den Elementen <ul>, <ol> und <li> kennengelernt.

Mit CSS können wir nun direkt in das Design dieser Listen eingreifen, was auch dringend notwendig ist. Spätestens wenn wir aus einer Steuerung, die über eine Liste realisiert werden sollte, ein horizontales Design machen wollen, dann benötigen wir CSS.

In CSS gibt es die Anweisung list-style, welche die Kurzform für folgende Einzelanweisungen ist:

• list-style-type
• list-style-image
• list-style-position

Schauen wir uns die Einzelanweisungen an, bevor wir diese in die Kurzschreibweise überführen.

list-style-type – Aufzählungssymbol für Listen festlegen

Über die CSS-Anweisung list-style-type legen wir das Erscheinungsbild des Aufzählungszeichens fest. Diese Anweisung zeigt nur bei den HTML-Elementen <ul> und <ol> Wirkung.

Folgende Anweisungen gibt es für unsortierte Listen:

Folgende Anweisungen gibt es für sortierte (durchnummerierte) Listen:

Beide obigen Tabellen sind logisch voneinander getrennt. Und hier ist wichtig, dass man die Listen auch von der Logik her nutzt. Über CSS kann man zwar problemlos eine normalerweise durchnummerierte Liste anstelle der Nummerierung mit Spiegelstrichen darstellen lassen – nur ächzt hier die Logik. Also bitte sauber arbeiten.

Aufzählungssymbol/Aufzählungszeichen ausblenden

Und eine der wichtigen CSS-Anweisungen bei Listen ist das NICHT darstellen von Aufzählungszeichen!

Das wird immer wieder benötigt, wenn man aus Aufzählungen ein Steuerelement (eine Navigation) erstellt, dass keine Aufzählungszeichen wegen dem Design anzeigt.

list-style-image – ein Bild als Aufzählungszeichen

Hier kann eine Grafik als Aufzählungszeichen mitgegeben werden.

Der grundsätzliche Aufbau:

li  {
    list-style-image:url("aufzaehlungszeichen.jpg");
}

Es kann sowohl die Grafik im Format JPG, PNG, GIF wie auch als SVG genutzt werden. Allerdings macht diese Anweisung nicht besonders viel Spaß, da einerseits ein weiteres Element übertragen werden muss und andererseits (was noch viel schwerwiegender ist) die Positionierung der Grafik nicht präzise kontrolliert werden kann. Hier werden dann wilde Variante mit background-image anstelle von list-style-image durchgeführt (was ein anderes Kapitel ist).

list-style-position – Positionierung innerhalb oder außerhalb des Listenelements

Mit der CSS-Anweisung list-style-position können wir bestimmen, wo das Aufzählungszeichen positioniert wird. Es gibt allerdings nur 2 Varianten:

list-style-position: outside; /* Standardzustand. */
list-style-position: inside;

Auf den ersten Blick scheint hier nicht viel Unterschied zu sein. Haben wir allerdings bei einem Aufzählungspunkt mehr Text, dass dieser in die nächste Zeile umbricht, wird der Unterschied sichtbar. Wird die CSS-Einstellung list-style-position: outside; genutzt, wird der Text in der zweiten Zeile sauber unter dem vorangegangenen anderen Text platziert und das Erscheinungsbild ist gewohnt ruhig.

Bei der Einstellung list-style-position: inside; bricht der Text um und startet am Anfang der Folgezeile und umfließt somit das Aufzählungszeichen. Das ist weniger gut lesbar und wirkt unruhig.

Daher sollte man zum Standard mit der Darstellung outside tendieren und diese nutzen.

Wer die Hoffnung hatte über diese Anweisungen verschwundene Aufzählungszeichen wieder zu erhalten, liegt falsch. Oft passiert eins beim Design: wir setzen über CSS ein Reset der Abstände in unser Designn um nicht von irgendwelchen vom Browser vorgegebenen Abständen zu stolpern. Die typischen Anweisungen für einen Reset der Abstände in CSS sind dafür:

* { 
    margin: 0; 
    padding: 0; 
}

Damit killen wir aber auch für Aufzählungszeichen benötigte Abstände vor dem Text. Um hier die Aufzählungszeichen wieder sichtbar zu bekommen wird unserer Aufzählung ein Innenabstand mitgegeben.

ul, ol {
  padding-left: 1em;
}

Grundverständnis für Umwandlung einer Liste in eine Steuerleiste

Möchte man nun aus einer Liste, die das korrekte Element für eine Steuerung ist, eine schön designte horizontale Steuerung erstellen, sollte man folgenden Sachverhalt im Auge haben. Listen sind Blockelemente. Was ist damit gemeint. Schauen wir es uns am Beispiel an:

Hier unser HTML-Code für eine Steuerung:

<ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="diverses.htm">Diverses</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
</ul>

Jetzt machen wir den benötigten Platzbedarf durch Farben einmal deutlich. Sowohl unser ul wie auch unsere li bekommen eine Farbe über CSS zugewiesen:

ul {
    background-color: yellow;
    padding: 1em;
}
li {
    background-color: limegreen;	
    margin-top: 3px;
}

Jetzt kann man sich natürlich fragen, warum hier im Beispielcode für das Element ul ein Innenabstand für alle Seiten von 1em vergeben wurde. Aus didaktischen Gründen: man sieht hier einerseits schön, dass das Blockelement ul die komplette Breite nutzt und bei 1em das Aufzählungszeichen exakt vorne an der Kante platziert wird.

Auch das Element li ist ein Blockelement, das die komplette verfügbare Restbreite in Anspruch nimmt. Man sieht deutlich über die zugewiesene Hintergrundfarbe Gelb, das diese fast bis ganz nach rechts reicht und dass das Element die komplette verfügbare Breite minus des Innenabstands von 1em von unserem Element ul in Beschlag nimmt.

Jetzt wollen wir die Aufzählungszeichen ausblenden, was über list-style-type: none; funktioniert.

ul {
    background-color: yellow;
    padding: 1em;
    list-style-type: none;
}

Um nun unsere einzelnen Listenpunkte nebeneinander zu platzieren, ändern wir die Art der Anzeige über display: inline-block; bei unseren Elementen li:

li {
    background-color: limegreen;	
    margin-top: 3px;
    display: inline-block;
}

Warum gerade inline-block und nicht nur inline? Weil wir bei der Anzeigeart inline-block auch mit Innenabständen arbeiten können was ansonsten nicht funktionieren würde.

li {
    background-color: limegreen;	
    margin-top: 3px;
    display: inline-block;
    padding: .2em 1em;
}

Und wer die für den Nutzer besser bedienbare Steuerung bauen möchte, hängt die Innenabstände nicht an li, sondern an das Element a

ul {
    background-color: yellow;
    padding: 1em;
    list-style-type: none;
}
li {
    background-color: limegreen;	
    display: inline-block;
}
a {
    display: inline-block;
    padding: .2em 1em;
}

Warum gerade das Element a? Weil wir nun auf eine Mausberührung mit der Pseudoklasse :hover reagieren können.

Sobald also die Maus die Box berührt (inklusive des vergebenen Innenabstands) können wir mit CSS darauf reagieren:

ul {
    background-color: yellow;
    padding: 1em;
    list-style-type: none;
}
li {
    background-color: limegreen;	
    display: inline-block;
}
a {
    display: inline-block;
    padding: .2em 1em;
}
a:hover {
    background-color: orange;
}

Um das Ganze noch abzurunden, packen wir unsere Steuerung in das HTML-Element <nav> und lassen unser CSS nur diesen Bereich gelten. Hier der komplette Code:

<style>
nav ul {
    background-color: yellow;
    padding: 1em;
    list-style-type: none;
}
nav li {
    background-color: limegreen;	
    display: inline-block;
}
nav a {
    display: inline-block;
    padding: .2em 1em;
}
nav a:hover {
	background-color: orange;
}
</style>
<h1>Beispiel Listen und CSS</h1>
<nav>
    <ul>
        <li><a href="index.htm">Startseite</a></li>
        <li><a href="diverses.htm">Diverses</a></li>
        <li><a href="impressum.htm">Impressum</a></li>
    </ul>
</nav>
<ul>
    <li>Aufzählungs außerhalb unserer Steuerung bekommen 
    kein Design von der Steuerung!</li>
    <li>einfach einmal testen</li>
</ul>