 SELFHTML aktuell Artikel CSS
| |
 |
CSS:
|
 |
|
 | |
| Name: | Thomas J. Sebestyen |
|---|---|
| E-Mail: |  thomas.js@selfhtml.org |
| Homepage-URL: |  http://www.meta-text.net |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
Listen sind ein praktisches und oft verwendetes Mittel zur Darstellung von Informationen, wie z.B. Inhaltsverzeichnissen etc. Mit Hilfe von HTML ist es zwar möglich, auch die Nummerierung von Listen zu bestimmen, jedoch sind die Grenzen dabei bald erreicht, wenn es um eine hybride, also um eine gemischte Art der Nummerierung geht, wo nicht nur eine automatische Nummerierung fortgeführt werden soll, sondern auch verschiedene Aufzählungsformate gemischt werden müssen.
Abhilfe schafft hier CSS mit der Möglichkeit, Inhalte automatisch zu generieren und somit Nummerierungszähler zu definieren und zu steuern. Das folgende Beispiel zeigt Ihnen, wie solch eine hybride Nummerierung mit nur wenigen Angaben erreicht werden kann.
Anzeigebeispiel: So sieht's aus (beachten Sie bitte die Hinweise zur Browserunterstützung weiter unten)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Listen mit hybriden Nummerierung formatieren
</title>
<style type="text/css">
<!--
ol.ebene1 {
counter-reset:listenpunkt_ebene1;
list-style-type:none;
}
ol.ebene1 li:before {
content: counter(listenpunkt_ebene1) ". ";
counter-increment:listenpunkt_ebene1;
}
ol.ebene2 {
counter-reset:listenpunkt_ebene2;
list-style-type:none;
}
ol.ebene2 li:before {
content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,lower-alpha) ". ";
counter-increment:listenpunkt_ebene2;
}
-->
</style>
</head>
<body>
<ol class="ebene1">
<li>Allgemeines zu Pseudoformaten</li>
<li>Pseudoformate für Verweise
<ol class="ebene2">
<li>:link</li>
<li>:visited</li>
<li>:hover</li>
<li>:active</li>
<li>:focus</li>
</ol>
</li>
<li>Pseudoformate für Absätze
<ol class="ebene2">
<li>:first-line</li>
<li>:first-letter</li>
<li>:first-child </li>
</ol>
</li>
<li>Pseudoformate für automatisch generierten Text
<ol class="ebene2">
<li>:before</li>
<li>:after</li>
</ol>
</li>
<li>Automatische Nummerierung</li>
</ol>
</body>
</html>
Das Beispiel sollte im Browser eine ähnliche Darstellung wie folgt ergeben:
1. Allgemeines zu Pseudoformaten
2. Pseudoformate für Verweise
2a. :link
2b. :visited
2c. :hover
2d. :active
2e. :focus
3. Pseudoformate für Absätze
3a. :first-line
3b. :first-letter
3c. :first-child
4. Pseudoformate für automatisch generierten Text
4a. :before
4b. :after
5. Automatische Nummerierung
Im Beispiel wird eine verschachtelte Liste mit zwei Ebenen definiert, wobei die Nummerierung der Listenpunkte der zweiten Ebene einerseits die Nummer des übergeordneten Listenpunktes behalten und anderseits zusätzlich auch eine eigene Nummerierung in einem anderen Format erhalten sollen.
Zunächst sollten Sie für die erste Ebene der Liste eine eigene 
Klasse
ol.ebene1 definieren und bestimmen, dass der Nummerierungszähler bei jedem Vorkommen dieser Klasse auf Null (die Voreinstellung)
zurückgesetzt wird: counter-reset:listenpunkt_ebene1;. Der Name des Zählers ist hier listenpunkt_ebene1.
Die Angabe list-style-type:none; dient lediglich dazu, die HTML eigene Nummerierung zu unterbinden, da wir diese durch die Nummerierung per CSS ersetzen wollen:
ol.ebene1 {
counter-reset:listenpunkt_ebene1;
list-style-type:none;
}
Im nächsten Schritt greifen Sie für die Listenpunkte der ersten Ebene ol.ebene1 li auf das
Pseudoformat :before
zurück, mit dessen Hilfe automatisch Texte generiert werden können.
Den Inhalt des generierten Textes können Sie mit der CSS-Eigenschaft content des :before Pseudoformats bestimmen.
Als Inhalt werden wir einen Zähler counter() definieren und diesem Zähler einen Namen listenpunkt_ebene1 geben,
gefolgt von einem Punkt und einem Leerzeichen zwischen Anführungszeichen (". ").
Mit der Angabe counter-increment:listenpunkt_ebene1; erhöhen Sie den benannten Zähler listenpunkt_ebene1 um eins.
Und so sieht die weitere Definition für die Listenpunkte der ersten Ebene aus:
ol.ebene1 li:before {
content: counter(listenpunkt_ebene1) ".";
counter-increment:listenpunkt_ebene1;
}
Ganz ähnlich verfahren Sie bei der Definition der Liste der zweiten Ebene. Zuerst definieren Sie eine Klasse, dann die Rücksetzung der Nummerierungszähler und die Unterdrückung der HTML eigenen Nummerierung:
ol.ebene2 {
counter-reset:listenpunkt_ebene2;
list-style-type:none;
}
Die Definition für die Listenpunkte der zweiten Ebene sieht aber nun ein wenig anders aus:
ol.ebene2 li:before {
content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,lower-alpha) ".";
counter-increment:listenpunkt_ebene2;
}
Hier müssen Sie nun zwei Zähler verwenden. Mit dem ersten Zähler counter(listenpunkt_ebene1) greifen Sie auf den Zähler des
übergeordneten Listenpunktes zurück. Mit dem zweiten Zähler definieren Sie einen eigenen Zähler für die Listenpunkte der aktuellen Ebene
und gleichzeitig bestimmen Sie, welchen Darstellungstyp
dieser Zähler haben soll: counter(listenpunkt_ebene2,lower-alpha). Darauf folgen hier ebenfalls ein Punkt und ein Leerzeichen
zwischen Anführungszeichen (". "). Abschließend erhöhen Sie den neuen Zähler mit counter-increment:listenpunkt_ebene2.
Falls Sie beim counter() nur den Namen des Zählers bestimmen, z.B. mit counter(listenpunkt_ebene1), wird für die
Darstellung des Zählers automatisch das Format "decimal" angenommen.
Wollen Sie eine weitere Ebene einfügen, würde die CSS-Definition für eine Darstellung 1a1., 1a2., 1b1., 1b2. etc. wie folgt aussehen:
ol.ebene3 {
counter-reset:listenpunkt_ebene3;
list-style-type:none;
}
ol.ebene3 li:before {
content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,lower-alpha) counter(listenpunkt_ebene3) ". ";
counter-increment:listenpunkt_ebene3;
}
Bislang wird diese von CSS gebotene Möglichkeit nur von Opera, Firefox ab Version 1.5 und Konqueror ab Version 3.4 unterstützt.
Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.
SELFHTML HTML/XHTML, Listen
SELFHTML CSS, Formate für Klassen definieren
SELFHTML CSS, Pseudoelemente :before und :after
SELFHTML CSS, Automatische Nummerierung
W3C, Automatische Zähler und Nummerierung