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.
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