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 Kreiscircle
leerer Kreissquare
rechteckiger Kastennone
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