<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Listennummerierung mit Countern - Cascading Style Sheets - Workshop Internet-Präsenz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="DE" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="Übung Cascading Style Sheets. Listennummerierung mit Countern." /> <meta name="keywords" content="HTML, Cascading Style Sheets" /> <meta name="author" content="Roland Unger" /> <style type="text/css"> <!-- .up li { display: block; } .up li:before { content: counter(item) ") "; counter-increment: item; } .down { counter-reset: item 50; } .down li { display: block; } .down li:before { content: "[" counter(item) "] "; counter-increment: item -1; } --> </style> </head> <body> <h1>Workshop Internet-Präsenz</h1> <h2>Listennummerierung mit Countern - Cascading Style Sheets</h2> <p>Nachfolgendes Beispiel zeigt eine Liste mit aufwärts zählendem Zähler. Der Zählerstand lässt sich zwischendurch verändern, er muss den gewünschten Wert, um Eins vermindert, enthalten.</p> <p>Das Bespiel funktioniert bei Opera und bei Mozilla ab Version 1.8.</p> <ol class="up" style="counter-reset: item 21"> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li style="counter-reset: item 70">Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> </ol> <p>Auch rückwärts zählen ist möglich.</p> <ol class="down"> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> <li>Eintrag</li> </ol> </body> </html>