Der Beitrag "HTML Listen - Darstellungsvarianten per CSS" besteht aus zwei Seiten

• Teil 1: HTML Listen - Darstellungsvarianten per CSS - geordnete Listen
• Teil 2: HTML Listen - Darstellungsvarianten per CSS - ungeordnete Listen

HTML-Code

Grundlage für die HTML-Listen-Varianten stellt eine geordnete Liste ol mit zehn Einträgen dar. Diese listet die Oscar- Preisträger von 1991 bis 2000 auf.

Die Steuerung der Startzahl ist über CSS nicht möglich. Hier muss im HTML das Attribut start gesetzt werden, damit die Liste bei der gewünschten Zahl, in diesem Fall 1991, beginnt. Ohne einen Startwert beginnt eine geordnete Liste immer mit 1.

<header>
 <h2>Oscar-Preisträger Bester Film</h2>
 <h3>1991–2000</h3>
</header>
<ol start="1991" id="oscar">
    <li>Der mit dem Wolf tanzt</li>
    <li>Das Schweigen der Lämmer</li>
    <li>Erbarmungslos</li>
    <li>Schindlers Liste</li>
    <li>Forrest Gump</li>
    <li>Braveheart</li>
    <li>Der englische Patient</li>
    <li>Titanic</li>
    <li>Shakespeare in Love</li>
    <li>American Beauty</li>
</ol>

So sieht's aus:

Ohne jegliches CSS sieht die Liste wie in dieser Darstellung aus. Im Browser-Stylesheet (siehe auch Firefox Default-CSS) haben Listen (sowohl ungeordnete Listen ul als auch geordnete ol) einen oberen und unteren Außenabstand von 1em (entspricht 16px, wenn keine weitere Schriftgrößenanpassung vorgenommen wurde) und einen linken Innenabstand von 40px. Listenzeichen befinden sich standardmäßig vor, und nicht im Listeneintrag.

Aufgrund des linken Abstandes von 40px ragen die Listenpunkte über den Rand hinaus, die vier Zahlen der Jahreszahlen nehmen zu viel Platz ein.

Listenabstand hinzufügen

CSS:

ol {
    padding-left: 4em;
}

Über padding-left wird so viel Platz geschaffen, dass die Jahreszahlen nicht über den Rand hinausragen.

So sieht's aus:

Abstände zwischen den Listenpunkten und Trennlinien

CSS:

ol li{
    padding: 4px;
    border-top: 1px dashed #999999;
}

Für die Listeneinträge wird ein Innenabstand definiert, damit die Darstellung etwas »luftiger« wird. Über border-top erhält jeder Listeneintrag oben eine gestrichelte Linie, welche die Listenpunkte voneinander abtrennt.

So sieht's aus:

Untere Linie ergänzen

Problem an dieser Darstellung ist, dass die untere Linie fehlt. Ob bei Listen oder auch Tabellen, wenn eine Linie nur oben oder nur unten definiert wird, es fehlt auf der anderen Seite immer eine Linie, was im Alltag eine Standardaufgabe ist. Zumeist wird in diesem Fall dem letzten li-Element eine Extra-CSS- Klasse last hinzugefügt, um darüber eine untere Linie definieren zu können.

Dank CSS3 und neuer Pseudoklassen kann dieses Problem derweil ohne Anpassungen im HTML gelöst werden.

CSS:

ol li:last-child {
    border-bottom: 1px dashed #999999;
}

Die Anforderung einer Linie am Ende der Liste kann mit der Strukturpseudoklasse :last-child umgesetzt werden. »Pseudoklasse« bedeutet, es wird kein konkretes HTML-Element über den Elementname angesprochen, sondern eins, was sich durch die Position, also der Struktur im HTML ergibt.

Dabei bewirkt der Nachfahrselektor ol li:last-child ( also die einfache Kombination von ol und li:last- child), dass innerhalb von geordneten Listen das letzte Kindelement angesprochen wird, also der letzte Listenpunkt. Die Kombination von li und :last-child bewirkt, dass dies nur auf li-Elemente wirkt. Ohne das li würde dieser Nachfahrseletor alle letzten Kindelemente auf jeder weiteren Ebene im HTML steuern. Sprich: wären in einem Listenpunkt noch weitere HTML-Elemente verschachtelt, und der Selektor ohne ein li aufgebaut, würde auch dort das letzte HTML-Element angesprochen.

So sieht's aus:

Wechselnde Hintergrundfarbe

Listen sind durch Linien besser zu lesen, aber auch wechselnde Hintergrundfarben unterstützen die Nutzerfreundlichkeit.

CSS:

ol li:nth-of-type(even) {
    background-color: #dddddd;
}

Über eine andere Strukturpseudoklasse :nth-of-type() können Wiederholungen definiert werden. Über das Schlüsselwort even, was »gerade« bedeutet, wird jede zweite Zeile grau hinterlegt.

Wichtig ist, dass zwischen nth-of-type und den folgenden Klammern kein Leerzeichen ist, sonst greift der Selektor nicht. Auch sei hier zu erwähnen, dass das Schlüsselwort even ohne einfache oder doppelte Anführungszeichen notiert wird, wie es generell bei Schlüsselworten in CSS der Fall ist.

So sieht's aus:

Zweite Hintergrundfarbe

CSS:

ol li:nth-of-type(odd) {
    background-color: #ffffcc;
}

Mit der gleichen Pseudostrukturklasse und über das Schlüsselwort odd wird mit dieser CSS-Regel jeder ungerade Listeneintrag gelb eingefärbt.

So sieht's aus:

even und odd sind feststehende Schlüsselworte. :nth-of-type() bietet aber auch die Möglichkeit, mit Zahlwerten zu arbeiten, um so die Schrittweite der Wiederholungen selber definieren zu können

CSS:

ol li:nth-of-type(3n) {
    background-color: #f5f5f5;
}
ol li:nth-of-type(3n+1) {
    background-color: #dddddd;
}
ol li:nth-of-type(3n+2) {
    background-color: #ffe3e3;
}

Das n ist ebenfalls als Schlüsselwort zu verstehen und symbolisiert den Faktor für die Schrittweite der Wiederholungen.

:nth-of-type(3n) besagt, dass jedes 3. Element angesteuert wird. Dabei beginnt der Browser vom ersten Element an zu »zählen«, 1. und 2. Listenpunkt sind nicht betroffen, dann aber der 3., 6. und so weiter.

Das + und die Zahl dahinter bewirkt, dass der Zählstart für die Wiederholungen verändert wird. +1 bedeutet, dass nach dem ersten Element begonnen wird, also der 2. und 3. Listenpunkt ist von der Regel nicht betroffen, dann aber der 4., 7. usw.. Die Wiederholungen ziehen sich über alle Elemente, auch der 1. Listenpunkt ist so von dem Selektor :nth-of-type(3n+1) betroffen.

Entsprechend bewirkt der Selektor :nth-of-type(3n+2), dass in diesem Beispiel der 2., 5. und 8. Listenpunkt mit der gleichen Farbe hinterlegt sind.

So sieht's aus:

Listenzeichen anpassen, Listenzeichen innerhalb des Listeneintrags

Neben der farblichen Anpassung können über CSS-Listeneigenschaften auch die Zählzeichen verändert werden.

CSS:

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
    padding-left: 0px;
}

• Über list-style-type: upper-roman wird definiert, dass die Jahreszahlen in der römischen Schreibweise angezeigt werden.
• Über list-style-position: inside wird die Position der Listenzeichen verändert. Per Default stehen die Listenzeichen vor den Listeneinträgen, diese stehen dann alle auf der gleichen Höhe. Das Schlüsselwort inside bewirkt, dass die Zählzeichen beziehungsweise Listenpunkte innerhalb des Listeneintrags dargestellt werden. Der Text schließt sich dann an das Listenzeichen an, damit sind die Einträge selber nicht mehr zwingend auf derselben Höhe.
• In den vorherigen Beispielen wurde wegen der lange Zahlen ein linker Abstand der Liste definiert. Über padding-left: 0px; wird dieser zurückgesetzt, sonst würde die komplette Liste mit einem Einzug dargestellt werden.

So sieht's aus:

Die CSS-Eigenschaften list-style-type und list-style-position können in einer Kurzschreibweise zusammengefasst werden: list-style: upper-roman inside. Welche Schreibweise man wählt, ist letztendlich Geschmacksache. Ich bin zwar Fan von einer schlanken Codierung, im Falle von Kurzschreibeisen geht jedoch gerne die Lesbarkeit des CSS verloren, man spart zwar Zeilen, erschwert sich jedoch die Pflege des CSS.

Als Zahlzeichen gibt es verschiedene Schlüsselwörter. Welche zur Verfügung stehen, ist unter www.css-wiki.com -> list-style-type zu finden.

Der Beitrag "HTML Listen - Darstellungsvarianten per CSS" besteht aus zwei Seiten

• Teil 1: HTML Listen - Darstellungsvarianten per CSS - geordnete Listen
• Teil 2: HTML Listen - Darstellungsvarianten per CSS - ungeordnete Listen