Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 58
Zur Übersicht

58. Zählen mit CSS (Counter) (03.07.2001)

In der Spezifikation von CSS2 sind Definitionen für Counter vorgesehen. Diese dienen aber nicht zur Zählung der Site-Besucher, sondern können zur automatischen Nummerierung verwendet werden. Gezählt wird damit das Auftreten bestimmter Elemente innerhalb des Dokuments. Die Definition eines Counters erfolgt mittels der Content-Eigenschaft, wobei eine Zählvariable instanziiert wird. Durch Counter-Increment kann eine definierte Variable um einen bestimmten Betrag herauf gesetzt werden. Sollte es notwendig sein, einen Counter zurückzusetzen, steht Counter-Reset zur Verfügung.

Im folgenden Beispiel 58 wird eine Überschriftenstruktur simuliert (z. B. als Gliederung denkbar). Kapitelüberschriften werden mit H1- und ihre Unterpunkte mit H2-Tags ausgezeichnet. Dabei kommt noch das Pseudoelement :before zur Anwendung, welches die ermittelten Zahlenwerte vor die Texte platzieren soll. Analog dazu existiert :after zum Nachstellen von Inhalten. Innerhalb der Content-Definition kann neben dem Counter auch anderer Text in Anführungszeichen stehen. Hier werden nach dem Counter Leerzeichen bzw. ein Trennpunkt eingefügt. Die Variable varCounter1 wird bei jedem H1 um 1 erhöht. Da die Werte für die Unterkapitelüberschriften jeweils bei .1 beginnen sollen, muss der H2-Counter (in Gestalt der Variable varCounter2) beim Auffinden einer Hauptüberschrift wieder zurückgesetzt werden. Schließlich werden bei H2:before die Werte für Haupt- und Unterkapitel zusammengesetzt.

      CSS:

      H1:before
      {
      Content: Counter(varCounter1) " ";
      Counter-Increment: varCounter1 1;
      Counter-Reset: varCounter2;
      } 
      
      H2:before
      {
      Content: Counter(varCounter1) "." Counter(varCounter2) " ";
      Counter-Increment: varCounter2 1;
      }
      
      
      HTML:
      
      <H1>Kapitelname</H1>
        <H2>Unterkapitelname</H2>
        <H2>Unterkapitelname</H2>
        <H2>Unterkapitelname</H2>

      <H1>Kapitelname</H1>
        <H2>Unterkapitelname</H2>
        <H2>Unterkapitelname</H2>
        <H2>Unterkapitelname</H2>

      <H1>Kapitelname</H1>
        <H2>Unterkapitelname</H2>
        <H2>Unterkapitelname</H2>
        <H2>Unterkapitelname</H2>

      
Zurzeit kann nur Opera 5.x mit diesem 3 Jahre alten "Zukunfts-Feature" aufwarten. Andere Browser zeigen nur die Überschriften ohne numerische Gliederung an.