- Guys
- Sports
- Car
- Friends
- Gals
- Hairstyle
- Nails
- Friends
- Me
- Good friends
- Not so good friends
- Friends that I really dont like (see also “Good friends”)
- Boyfriend
- People who read this
- Internet
- Coffee
- Friends
- My Blog <3
- IRC
- ICQ
Das Problem
Mit dem <ol> HTML Tag kann man nummerierte Listen erzeugen. Es ist zwar erlaubt, diese Listen auch zu verschachteln um z.B. ein komplexes Inhaltsverzeichnis darzustellen, doch die Nummerierung wird nicht mit verschachtelt.
Strukturen wie …
1 Eine Kategorie
1.1 Erstes Thema in Kategorie 1
1.2 Zweites Thema in Kategorie 1
1.2.1 Unterpunkt im zweiten Thema in Kategorie 1
… sind mit den HTML-Möglichkeiten leider nicht machbar. Will man es mit HTML machen muss man die Nummerierung selber schreiben was Fehlerquellen birgt und insgesamt sehr umständlich ist.
Die Lösung
Hier hilft uns CSS3. Mithilfe der :before Pseudoklasse und der counter() Funktion mit den zugehörigen Eigenschaften, können wir uns so eine geschachtelte Nummerierung selber bauen. Es ist im Grunde auch ganz einfach und funktioniert mit allen modernen Browsern. IE konnte ich ab Version 8 testen (lassen).
Das obige Beispiel gibt es natürlich auch komplett inkl. Sourcecode.
Um unserer <ol> das richtige Zählen anzugewöhnen, müssen wir ihr zuerst das falsche Zählen abgewöhnen und ihr einen neuen Zähler verpassen.
-
ol{
-
list-style-type:none; /* Das falsche Zählen abgewöhnen */
-
counter-reset:olist; /* Einen neuen Zähler verpassen */
-
}
Den Listeneinträgen müssen wir beibringen, dass sie zählen und sich den neuen Zähler vorne hin schreiben.
-
ol li:before{ /* Wir wollen was vor dem eigentlichen Inhalt ausgeben */
-
margin-right:1em; /* Bisschen Abstand zum eigentlichen Inhalt */
-
counter-increment:olist 1; /* zählen … */
-
content:counter(olist); /* und den Zähler vorne hin schreiben */
-
}
Wollen wir das ganze verschachteln, müssen wir für jede “Schachtel” einen neuen Zähler haben und die Ausgabe ein wenig anpassen. Die Verschachtelung stellen wir einfach durch Wiederholung im CSS dar und schön wirds.
-
ol li ol{
-
counter-reset:olist2; /* Die neue <ol> Schachtel bracht auch einen neuen Zähler*/
-
}
-
ol li ol li:before{
-
margin-right:1em;
-
counter-increment:olist2 1; /* den neuen Zähler zählen */
-
content:counter(olist) “.” counter(olist2); /* Die Ausgabe anpassen */
-
}
Das ganze können wir immer weiter wiederholen, je nachdem wie viele Verschachtelungen wir brauchen. Für die dritte Schachtel sieht das dann so aus.
-
ol li ol li ol{
-
counter-reset:olist3;
-
}
-
ol li ol li ol li:before{
-
margin-right:1em;
-
counter-increment:olist3 1;
-
content:counter(olist) “.” counter(olist2) “.” counter(olist3);
-
}
Noch was …
Leider kann man auf diese Art nur Zählungen mit Dezimalzahlen machen. Alphabetische oder Lateinische Nummerierungen sind so nicht möglich. Aber es ergeben sich auch viele Vorteile!
Der Pseudoklasse :before können wir alle möglichen CSS Eigenschaften zuweisen. So könnten wir ihr auch eigene Fonts, Rahmen, Hintergrundbilder/-farben oder was-auch-immer verpassen. Richtig spannend wird es beim content der Pseudoklasse. Da können wir reinschreiben was wir wollen. Also auch Links setzen, Bilder einfügen ja sogar Javascripts ausführen! So könnte man dann auch eine Nummerierung in beliebigen Formaten realisieren.
(ix)
