css-café

6. Listen

• 6.1 list-style-type
• 6.2 list-style-image
• 6.3 list-style-position
• 6.4 list-style (Kurzform)
• 6.5 marker-offset (entfernt in 2.1)

Listen sind geordnete oder ungeordnete Aufzählungen gleichwertiger Elemente. Bei einer Aufzählungsliste werden standardmäßig alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.

6.1 list-style-type

Bestimmt die Form des Aufzählungszeichens [CSS1].

Beispiel:
ul {list-style-type: circle;}

Werte	none | disc | circle | square | inherit Zahlensysteme: decimal | decimal-leading-zero | lower-roman | upper-roman | armenian | georgian Alphabetische Systeme: lower-alpha | lower-latin | upper-alpha | upper-latin | lower-greek
Default	disc
Vererbt	ja

• none – kein Listensymbol;
• disc – gefüllter Kreis;
• circle – nicht gefüllter Kreis;
• square – gefülltes Quadrat;

Die Nummerierung geordneter Listen mit zahlenbasierten oder alphabetischen Systemen und die notwendige Internationalisierung werden bisher nur sehr notdürftig unterstützt und sind daher wenig praxistauglich.

• decimal – Dezimalzahlen;
• decimal-leading-zero – Dezimalzahlen mit führender Null;
• lower-roman – kleine römische Zahlen;
• upper-roman – große römische Zahlen;
• lower-alpha, lower-latin – ASCII-Kleinbuchstaben;
• upper-alpha, upper-latin – ASCII-Großbuchstaben;
• lower-greek – griechische Kleinbuchstaben;
• armenian, georgian – Zahlenzeichen aus armenischer oder georgischer Schrift.

Vorgesehen waren auch folgende Werte: hebrew (hebräisch), cjk-ideographic, hiragana, katakana, hiragana-iroha und katakana-iroha (asiatische Schriften).

^ nach oben

6.2 list-style-image

Externe Grafik als Aufzählungszeichen [CSS1].

Beispiel:
#menue li {list-style-image: url(../img/bullet.gif);}

Werte	URI | none | inherit
Default	none
Vererbt	ja

Das Image ersetzt das „hauseigene”” Aufzählungszeichen. Da man kaum Möglichkeiten zur weiteren Formatierung hat, bietet sich als Alternative der Einsatz eines Hintergrundbildes an.

^ nach oben

6.3 list-style-position

Bestimmt die Position der Aufzählungszeichen im Verhältnis zur primären Block-Box [CSS1].

Beispiel:
ul {list-style-position: inside;}

Werte	inside | outside | inherit
Default	outside
Vererbt	ja

• inside – die Marker-Box sitzt innerhalb der primären Block-Box und wird dem Inhalt als weitere Inline-Box vorangestellt;
• outside – die Marker-Box sitzt außerhalb der primären Block-Box.

^ nach oben

6.4 list-style (Kurzform)

Fasst verschiedene Eigenschaften der Listenformatierung zusammen [CSS1].

Beispiel:
ul {list-style: url(bullet.gif) inside;}

Werte	list-style-type | list-style-position | list-style-image | inherit
Default	siehe einzelne Eigenschaften
Vererbt	ja

^ nach oben

6.5 marker-offset

Dient zur Kontrolle von Abständen bei Listenelementen [nur CSS2].

Diese Eigenschaft wurde (wie marker, siehe display) mit der CSS2.1-Spezifikation wieder entfernt.