Eine nummerierte Liste („ordered list“) in HTML zu erstellen ist bekanntlich nicht schwer (<ol>
). Wenn man eine Unterebene benötigt, so beginnt die Zählung wieder bei 1. Hier eine Lösung, mit der die untergeordneten Listeneinträge die Ziffer der übergeordneten Seite voran stellen.
Das Ergebnis soll in etwa so aussehen:
1. Ebene 1.1. Unterpunkt 1 1.2. Unterpunkt 2 1.3. Unterpunkt 3 1.4. Unterpunkt 4 1.5. Unterpunkt 5 2. Ebene 2.1. Unterpunkt 1 2.2. Unterpunkt 2 2.3. Unterpunkt 3 3. Ebene 3.1. Unterpunkt 1 3.2. Unterpunkt 2 3.3. Unterpunkt 3
Um zum Ziel zu gelangen benötigt man Pseudoformate sowie die CSS Eigenschaften: counter
, counter-reset
und counter-increment
.
Das HTML:
<ol class="ebene1"> <li>Ebene 1 <ol class="ebene2"> <li>Unterpunkt 1</li> <li>Unterpunkt 2</li> <li>Unterpunkt 3</li> <li>Unterpunkt 4</li> <li>Unterpunkt 5</li> </ol> </li> <li>Ebene 2 <ol class="ebene2"> <li>Unterpunkt 1</li> <li>Unterpunkt 2</li> <li>Unterpunkt 3</li> </ol> </li> <li>Ebene 3 <ol class="ebene2"> <li>Unterpunkt 1</li> <li>Unterpunkt 2</li> </ol> </li> </ol> |
Und das notwendige CSS:
ol.ebene1 { counter-reset:listenpunkt_ebene1; list-style-type:none; } ol.ebene1 li:before { content: counter(listenpunkt_ebene1) ". "; counter-increment:listenpunkt_ebene1; } ol.ebene2 { counter-reset:listenpunkt_ebene2; list-style-type:none; } ol.ebene2 li:before { content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2,decimal) ". "; counter-increment:listenpunkt_ebene2; } |
Demo
Link: aktuell.de.selfhtml.org/artikel/css/nummerierung/
Hinweis: der Internet Explorer < 8 kann es nicht darstellen.