list-style-type (Listendarstellungstype)

Für Auzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.

list-style-type:

Mit list-style-type: können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben. decimal = für ol-Listen: Nummerierung 1.,2.,3.,4. usw. lower-roman = für ol-Listen: Nummerierung i.,ii.,iii.,iv. usw. upper-roman = für ol-Listen: Nummerierung I.,II.,III.,IV. usw. lower-alpha = für ol-Listen: Nummerierung a.,b.,c.,d. usw. upper-alpha = für ol-Listen: Nummerierung A.,B.,C.,D. usw. disc = für ul-Listen: Dateisymbol als Bulletzeichen circle = für ul-Listen: rundes Bulletzeichen square = für ul-Listen: rechteckiges Bulletzeichen none = kein Bulletzeichen, keine Nummerierung

Beispiel:

Nummerierte Liste <span style="color:blue">&lt;ol&gt;</span> mit Darstellungstyp <b><i>decimal</i></b> <ol style="list-style-type:decimal"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ol>

Nummerierte Liste <ol> mit Darstellungstyp decimal Tagesordnung Pause Besprechung

Nummerierte Liste <span style="color:blue">&lt;ol&gt;</span> mit Darstellungstyp <b><i>lower-roman</i></b> <ol style="list-style-type:lower-roman"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ol>

Nummerierte Liste <ol> mit Darstellungstyp lower-roman Tagesordnung Pause Besprechung

Nummerierte Liste <span style="color:blue">&lt;ol&gt;</span> mit Darstellungstyp <b><i>upper-roman</i></b> <ol style="list-style-type:upper-roman"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ol>

Nummerierte Liste <ol> mit Darstellungstyp upper-roman Tagesordnung Pause Besprechung

Nummerierte Liste <span style="color:blue">&lt;ol&gt;</span> mit Darstellungstyp <b><i>lower-alpha</i></b> <ol style="list-style-type:lower-alpha"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ol>

Nummerierte Liste <ol> mit Darstellungstyp lower-alpha Tagesordnung Pause Besprechung

Nummerierte Liste <span style="color:blue">&lt;ol&gt;</span> mit Darstellungstyp <b><i>upper-alpha</i></b> <ol style="list-style-type:upper-alpha"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ol>

Nummerierte Liste <ol> mit Darstellungstyp upper-alpha Tagesordnung Pause Besprechung

Aufzählungsliste <span style="color:blue">&lt;ul&gt;</span> mit Darstellungstyp <b><i>disc</i></b> <ul style="list-style-type:disc"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ul>

Aufzählungsliste <ul> mit Darstellungstyp disc Tagesordnung Pause Besprechung

Aufzählungsliste <span style="color:blue">&lt;ul&gt;</span> mit Darstellungstyp <b><i>circle</i></b> <ul style="list-style-type:circle"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ul>

Aufzählungsliste <ul> mit Darstellungstyp circle Tagesordnung Pause Besprechung

Aufzählungsliste <span style="color:blue">&lt;ul&gt;</span> mit Darstellungstyp <b><i>square</i></b> <ul style="list-style-type:square"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ul>

Aufzählungsliste <ul> mit Darstellungstyp square Tagesordnung Pause Besprechung

Aufzählungsliste <span style="color:blue">&lt;ul&gt;</span> mit Darstellungstyp <b><i>none</i></b> <ul style="list-style-type:none"> <li>Tagesordnung</li> <li>Pause</li> <li>Besprechung</li> </ul>

Aufzählungsliste <ul> mit Darstellungstyp none Tagesordnung Pause Besprechung

list-style-position (Listeneinrückung)

Sie können bestimmen, wie sich Bulletzeichen oder Nuermerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.

list-style-position:

Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben. inside = eingerückt outside = ausgerückt (Voreinstellung)

Beispiel:

Nummerierte Liste <span style="color:blue">&lt;ol&gt;</span> mit Listeneinrückung <b><i>outside</i></b> <ol style="list-style-position:outside"> <li>Tagesordnung<br>xxxxxxxxxxxxxxxx</li> <li>Pause<br>xxxxxxxxxxxxxxxx</li> <li>Besprechung<br>xxxxxxxxxxxxxxxx</li> </ol>

Nummerierte Liste <ol> mit Listeneinrückung outside Tagesordnung xxxxxxxxxxxxxxxx Pause xxxxxxxxxxxxxxxx Besprechung xxxxxxxxxxxxxxxx

Nummerierte Liste <span style="color:blue">&lt;ol&gt;</span> mit Listeneinrückung <b><i>inside</i></b> <ol style="list-style-position:inside"> <li>Tagesordnung<br>xxxxxxxxxxxxxxxx</li> <li>Pause<br>xxxxxxxxxxxxxxxx</li> <li>Besprechung<br>xxxxxxxxxxxxxxxx</li> </ol>

Nummerierte Liste <ol> mit Listeneinrückung inside Tagesordnung xxxxxxxxxxxxxxxx Pause xxxxxxxxxxxxxxxx Besprechung xxxxxxxxxxxxxxxx

list-style-image (eigene Bullet-Grafik)

Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.

list-style-image:url(dateiname)

Mit list-style-image:url(dateiname) können Sie eine Grafik für das eigene Bulletzeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.

Beispiel:

Aufzählungsliste <span style="color:blue">&lt;ul&gt;</span> mit eigenem Bullet <b><i>checks.gif</i></b> <ul style="list-style-image:url(img/checks.gif)"> <li>Tagesordnung<br>xxxxxxxxxxxxxxxx</li> <li>Pause<br>xxxxxxxxxxxxxxxx</li> <li>Besprechung<br>xxxxxxxxxxxxxxxx</li> </ul>

Aufzählungsliste <ul> mit eigenem Bullet checks.gif Tagesordnung xxxxxxxxxxxxxxxx Pause xxxxxxxxxxxxxxxx Besprechung xxxxxxxxxxxxxxxx

list-style (Listendarstellung allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:

• list-style-type (Darstellungstyp)
• list-style-position (Listeneinrückung)
• list-style-image (Eigene Bullet-Grafik)

list-style:

Mit list-style:url können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder nummerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

Beispiel:

Aufzählungsliste <span style="color:blue">&lt;ul&gt;</span> mit eigenem Bullet <b><i>orangebu.gif inside</i></b> <ul style="list-style:url(img/orangebu.gif) inside"> <li>Tagesordnung<br>xxxxxxxxxxxxxxxx</li> <li>Pause<br>xxxxxxxxxxxxxxxx</li> <li>Besprechung<br>xxxxxxxxxxxxxxxx</li> </ul>

Aufzählungsliste <ul> mit eigenem Bullet orangebu.gif inside Tagesordnung xxxxxxxxxxxxxxxx Pause xxxxxxxxxxxxxxxx Besprechung xxxxxxxxxxxxxxxx

Der Startwert der Aufzählung start=" " wird in den Stylesheets noch nicht benutzt. Sollten Sie also eine Auflistung anzeigen wollen, die mit einem bestimmten Wert beginnen soll, so müssen Sie im Befehl <ol> den Wert start=" " angeben. Siehe auch Numerierte Aufzählungen Startwert festlegen.