CSS - Elemente - Listen

1. list-style

Bei dieser Kurzschreibweise müsst ihr auf keine Reihenfolge achten, da die Werte jeweils einzigartig sind und dementsprechend vom Browser automatisch interpretiert werden.

2. list-style-type

Definiert das Aussehen der Aufzählungszeichen. Bei geordneten Listen (<ol>) gibt es folgende Optionen, die in allen Browsern funktionieren.

• decimal 1. 2. 3. 4. usw.
• lower-roman i. ii. iii. iv. usw.
• upper-roman I. II. III. IV. usw.
• lower-alpha / lower-latin a. b. c. d. usw.
• upper-alpha / upper-latin A. B. C. D. usw.

Den Rest kann man komplett ignorieren, da jeder Browser macht, was er will.

Für ungeordnete Listen (<ul>) haben wir folgende Möglichkeiten:

• disc gefüllter Kreis
• circle leerer Kreis
• square rechteckiger Kasten
• none kein Aufzählungszeichen

3. list-style-image

Dabei kann man Aufzählungszeichen durch eigene Bilder ersetzen, z.B.

li
{
  list-style-image: url(bilder/ball.gif);
}

Leider gibt es je nach Browser ziemliche Darstellungsunterschiede. Der Internet Explorer positioniert die Bilder zu hoch und der Firefox ein wenig zu niedrig. Ich selber verzichte daher komplett auf diese Möglichkeit und arbeite stattdessen lieber mit Hintergrundbildern und Innenabständen.

4. list-style-position

Setzt das Einrückungsverhalten des Aufzählungszeichens im Bezug auf den Inhalt fest.

• inside eingerückt (Das Aufzählungszeichen ist Teil des Inhalts)
• outside ausgerückt (Standard)

Tipp

Lasst die Finger von inside. Das Ergebnis ist fast immer nicht das, was ihr haben wollt.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt