Die Formatierung einer Liste ändern

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Standarddarstellung der Liste soll so verändert werden, dass beispielsweise ein anderes Aufzählungszeichen oder eine spezielle Nummerierung benutzt wird, wie in folgender Abbildung gezeigt.

Aufzählungszeichen in Liste: kleingeschriebene römische Zahlen

Abbildung: Als Aufzählungszeichen werden in dieser Liste kleingeschriebene römische Zahlen benutzt.

Lösung

Verwenden Sie die Eigenschaft list-style-type, um das Aufzählungszeichen oder den Zähler für die Liste anzupassen:

li {
 list-style-type: lower-roman;
}

Diskussion

Die CSS 2.1-Spezifikation definiert verschiedene Stile für die möglichen Aufzählungszeichen (siehe folgende Tabelle). In der Regel verwenden die Browser für die einzelnen Schachtelungsebenen unterschiedliche Marker. Anstelle dieses Systems können Sie für die Unterlisten mit list-style-type auch eigene Marker definieren.

Tabelle: Die verschiedenen Stile für Marker.

Stil/Wert Beschreibung Browserunterstützung
square Normalerweise ein ausgefülltes Quadrat, allerdings ist die exakte Darstellung nicht weiter definiert. Alle größeren Browser
disc Normalerweise ein ausgefüllter Kreis, allerdings ist die exakte Darstellung nicht weiter definiert. Alle größeren Browser
circle Normalerweise ein nicht ausgefüllter Kreis, allerdings ist die exakte Darstellung nicht weiter definiert. Alle größeren Browser
decimal Eine fortlaufende Zahlenfolge, die mit 1 beginnt, gefolgt von 2, 3, 4 usw. Alle größeren Browser
decimal-leading-zero Eine Reihe fortlaufender Zahlen mit einer oder mehreren vorangestellten Nullen (beginnend mit 01, gefolgt von 02, 03, 04 usw.). Die Anzahl der führenden Nullen kann der Anzahl der in der Liste benutzten Ziffern entsprechen. Bei einer Liste mit 5876 Einträgen wäre die erste Zahl dann 0001. Alle größeren Browser
lower-roman Beginnt mit einer Reihe kleingeschriebener, fortlaufender römischer Zahlen. Alle größeren Browser
upper-roman Beginnt mit einer Reihe großgeschriebener, fortlaufender römischer Zahlen. Alle größeren Browser
lower-alpha Beginnt mit einer Reihe kleingeschriebener ASCII-Buchstaben. Alle größeren Browser
upper-alpha Beginnt mit einer Reihe großgeschriebener ASCII-Buchstaben. Alle größeren Browser
lower-latin Beginnt mit einer Reihe kleingeschriebener ASCII-Buchstaben. Alle größeren Browser
upper-latin Beginnt mit einer Reihe großgeschriebener ASCII-Buchstaben. Alle größeren Browser
lower-greek Beginnt mit einer Reihe klassischer griechischer Buchstaben, beginnend mit alpha, gefolgt von beta, gamma usw. Safari, Mozilla, Netscape 6+
hebrew Beginnt die Zählung mit traditionellen hebräischen Buchstaben. Safari, Mozilla, Netscape 6+
hiragana Beginnt die Zählung mit dem klassischen japanischen Hiragana-System. Mozilla, Netscape 6+
katakana Beginnt die Zählung mit dem klassischen japanischen Katakana-System. Mozilla, Netscape 6+
hiragana-iroha Beginnt die Zählung mit dem klassischen japanischen Hiragana-Iroha-System. Mozilla, Netscape 6+
katakana-iroha Beginnt die Zählung mit dem klassischen japanischen Katakana-Iroha-System. Mozilla, Netscape 6+
none Es wird kein Marker dargestellt. Alle größeren Browser

Siehe auch

Das Rezept Große Grafiken als Aufzählungszeichen verwenden zur Verwendung eigener Bilder als Aufzählungszeichen und Kapitel 12 in CSS – Das umfassende Handbuch von Eric A. Meyer (O’Reilly).

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln