Nummerieren mit CSS

Mittwoch, 28 November 2007 00:54 MET

Thema:
Webgestaltung  
Stichworte:
 
dieser Artikel  
Nummerieren mit CSS [hyperkontext | Weblog]
Kommentare 2

Weist Text in HTML eine lückenlose Überschriftenordnung auf, dann lassen sich die Überschriften mit den Möglichkeiten von Cascading Style Sheets automatisch nummerieren und sichtbar gliedern.

Auch geordnete Listen können mit CSS genauer nummeriert und nach Wunsch formatiert werden.

Überschriftenstruktur mit CSS nummerieren

Ein gut strukturiertes Dokument in HTML (Hypertext Markup Language) soll eine Überschriften-Hierarchie aufweisen. In manchen Texten wäre es aber zusätzlich hilfreich die Überschriften mit eindeutiger Nummerierung zu versehen, vergleichbar mit den Möglichkeiten der Gliederung aus Textverarbeitungsprogrammen.

Weist der Text eine lückenlose Überschriftenordnung auf (siehe auch Von der Einsicht der Struktur zur Vielfalt der Ansichten (2)), dann lassen sich die Überschriften mit den Möglichkeiten von Cascading Style Sheets (CSS) automatisch nummerieren.

Möglich macht das – innerhalb von :before oder :after – die Anweisung content und die Attribute counter() und counters(). Weiters die Eigenschaften counter-increment und counter-reset.

Mit Ausnahme des Internet Explorer (inklusive der Version 7) unterstützen alle modernen Browser diese Möglichkeit des CSS 2.1 Standards.

Ältere Browser oder Internet Explorer, die diese CSS-Anweisungen nicht verstehen, zeigen lediglich die Nummerierung und deren Formatierung nicht an. Hier braucht es also keine Hacks und Kunstgriffe, denn die Struktur der Überschriften des HTML-Dokuments bleibt vorhanden.

Eigene Formatierung für geordnete Listen

Auch geordnete und darin auch verschachtelte HTML-Listen können mit oben genannten Möglichkeiten per CSS genauer nummeriert und nach Wunsch formatiert werden.

Da in diesem Fall per CSS die Standard-Nummerierung zuerst entfernt wird (list-style-type:none), muss für den Internet-Explorer, welcher die anschließenden Formatierungen ja nicht versteht, die einfache Formatierung einer geordneten Liste (list-style-type:[typ]) erhalten bleiben beziehungsweise dem IE7 wieder verpasst werden.

Beispiele und weitere Informationen

Diese Möglichkeiten mit counter werden deswegen kaum eingesetzt, weil sie lange Zeit nur der Opera-Browser verstanden hat. Mittlerweile interpretieren diese standarkonformen Anweisungen so gut wie alle modernen Browser, mit Ausnahme der IE-Familie bis derzeitiger Version 7.

Da sich mit dem Thema schon andere kompetent befasst haben und ich mich nicht wiederholen will, verweise ich auf einige zu empfehlende Beispiele und fundierte Beiträge im Quellenverzeichnis. Deswegen stelle ich hier nur diese kleine Beispielseite mit zwei Anwendungsmöglichkeiten zur Ansicht. Die dazu gehörigen CSS-Anweisungen befinden sich im dortigen Quelltext.

Abschnitt 1 von 1

Quellenverzeichnis

  1. CSS: Listen automatisch mit hybrider Nummerierung formatieren [selfhtml.org]
  2. Zähler: Die Eigenschaften counter-increment und counter-reset [Michael Jendryschik]
  3. Styling the list numbers [Iacovos Constantinou]
  4. Make OL list start from number different than 1 using CSS [arraystudio.com]

Weitere Verweise zum Thema

Externe Verweise dieses Artikels wurden zuletzt am 24. Januar 2011 auf Relevanz geprüft.

Datum:
veröffentlicht am 28 November 2007, 00:54 MET.
Artikel:
Nummerieren mit CSS [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/101
Thema:
Webgestaltung 
Stichworte:
 
Reaktionen:
Kommentare 2

Kommentare (2) ansehen

Interne Bezugnahme von neueren Artikeln

  1. Mit CSS HTML-Elemente zählen und die Summe anzeigen vom 24. Januar 2011
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
November 2007 im Kontext
älterer Artikel »
Asoziale Manager machen kein soziales Intranet 2.0