Überschriften automatisch nummerieren
Weblica bietet mit den Absätzen eine einfache und mächtige Möglichkeit, die Inhalte Ihrer Seiten sauber und klar zu strukturieren. Mit wenigen Zeilen CSS können Sie daher die Absatz-Überschriften in weblica korrekt und völlig automatisch nummerieren.
Wir zeigen dies hier beispielhaft für Überschriften der Ebene 2 und 3:
Wir zeigen dies hier beispielhaft für Überschriften der Ebene 2 und 3:
Der CSS-Code
body {
counter-reset: h2counter;
}
h1 {
counter-reset: h2counter;
}
h2 {
counter-reset: h3counter;
}
h2:before {
content: counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;
}
h3:before {
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
counter-increment: h3counter;
}
counter-reset: h2counter;
}
h1 {
counter-reset: h2counter;
}
h2 {
counter-reset: h3counter;
}
h2:before {
content: counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;
}
h3:before {
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
counter-increment: h3counter;
}
Wo hinterlege ich diesen Code?
Für alle Seiten
Hinterlegen Sie diese Regel im CSS-Code für Ihr Projekt auf der Registerkarte "Global", siehe hierzu: Eigenen CSS-Code für ein Projekt hinterlegen.
Nur auf bestimmten Seiten
In diesem Fall fügen Sie auf der gewünschten Seite einen HTML-Absatz ein und bentten den CSS-Code in eine Style-Anweisung: <style type="text/css"> </style>.
Siehe hierzu auch die weblica Hilfe: Style-Definitionen in einem HTML-Absatz.
Siehe hierzu auch die weblica Hilfe: Style-Definitionen in einem HTML-Absatz.
Hinweise
Der CSS-Code setzt den Zähler für Überschriften der Ebene 2 (h2counter) jeweils für den HTML-Body und Überschriften der Ebene 1 zurück. Damit ist sicher gestellt, dass die Nummerierung korrekt mit 1 startet. Analog setzen wir den Zähler für Überschriften der Ebene 3 (h3counter) jeweils zurück, sobald wir auf eine Überschrift der Ebene 2 treffen.
Die CSS-Pseudoklasse :before erlaubt es uns, die Nummerierung mittels CSS automatisch der jeweiligen Überschrift voran zu stellen. Bei der Zeichenfolge \0000a0 handelt es sich um einen sog. non-breaking Space in CSS, ein Leerzeichen, das nicht umgebrochen wird.
Die CSS-Pseudoklasse :before erlaubt es uns, die Nummerierung mittels CSS automatisch der jeweiligen Überschrift voran zu stellen. Bei der Zeichenfolge \0000a0 handelt es sich um einen sog. non-breaking Space in CSS, ein Leerzeichen, das nicht umgebrochen wird.