Im Kapitel 13 des Buches »Mit Listen im Inhalt arbeiten« wird
beschrieben, wie mit CSS3 Listen gestaltet werden können.
Auf
dieser Seite sind alle Codebespiele sowie fortführende
Beschreibungen zu finden.
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.
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:
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:
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:
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:
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:
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;
}
list-style-type: upper-roman
wird definiert,
dass die Jahreszahlen in der römischen Schreibweise angezeigt
werden.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. 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.