Nummerierte Listen mit eigenem Zähler

Wenn die einfache fortlaufende Nummerierung von Listen für die gewünschte Darstellung nicht ausreicht, dann kann deren Aussehen und Zählweise mit Hilfe von HTML und CSS leicht angepasst werden.

VERSCHACHTELTE LISTEN MIT DEZIMALZEICHEN

1. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
   1. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
   2. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
   3. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
2. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
3. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

HTML

<ol>
	<li>Dies ist ein Typoblindtext...
		<ol>
			<li>Dies ist ein Typoblindtext...</li>
			<li>Dies ist ein Typoblindtext...</li>
			<li>Dies ist ein Typoblindtext...</li>
		</ol>
	</li>
	<li>Dies ist ein Typoblindtext...</li>
	<li>Dies ist ein Typoblindtext...</li>
</ol>

CSS

ol { 
    list-style-type: none; 
    counter-reset: item; 
}
ol li { 
    display: block; 
}
ol li:before { 
    content: counters(item, "") ". ";  
    counter-increment: item  
}
ol ol { 
    margin-left: 25px; 
}
ol li ol li:before { 
    content: counters(item, ".") " ";
    counter-increment: item 
}

Aufzählung von Listen unterbrechen und fortsetzen

Zuweilen kann man den HTML-Code übersichtlicher gestalten, wenn man die Liste unterbricht und später mit der richtigen Nummer wieder aufnimmt. Das geht mit start: <ol start=“3″>

1. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
2. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

3. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
4. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

HTML

<ol>
    <li>Dies ist ein Typoblindtext...</li>
    <li>Dies ist ein Typoblindtext...</li>
</ol>
<p>Es ist ein paradiesmatisches Land...</p>
<ol start="3">
    <li>Dies ist ein Typoblindtext...</li>
    <li>Dies ist ein Typoblindtext...</li>
</ol>

Zahlenwert für Nummerierung ändern

Wenn ein Zahlenwert in der Liste übersprungen oder die Reihenfolge geändert werden soll, dann kann der Default-Wert mit value übersteuert werden: <li value=“3″>

1. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
2. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
3. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

HTML

<ol>
    <li value="3">Dies ist ein Typoblindtext...</li>
    <li value="2">Dies ist ein Typoblindtext...</li>
    <li value="1">Dies ist ein Typoblindtext...</li>
</ol>