Lists and markers – Eigenschaften für Aufzählungen und Aufzählungssymbole

list-style-image

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Ja

list-style-image ist die Adresse eines Bildes, das als Aufzählungssymbol in einer Liste benutzt wird.

url ("urladdress") | none

url ("urladdress") ist der Pfad eines Bildes. Die Adresse muss in Klammern und von Hochkommas eingeschlossen sein.

none ist die Voreinstellung und gibt an, dass kein Bild eingespielt wird. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen nicht weiter angewendet werden.

Beispiel

ul.knopf { list-style-position: outside; 
    list-style-image: url("knopf.gif")} 
	... 
	<ul class="knopf">
    <li >Montag</li>
    <li>Dienstag</li>
    <li>Mittwoch</li>
    </ul> 

↑

list-style-position

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Ja

list-style-position legt fest, ob die Listenabsätze eingezogen werden oder nicht.

inside | outside

Wenn sich der Listeneintrag über mehrere Zeilen erstreckt, setzt inside das Listensymbol in den Absatz.

Wenn sich der Listeneintrag über mehrere Zeilen erstreckt, setzt outside das Listensymbol links vor den Absatz (Voreinstellung).

Beispiel

.liste_innen_eingezogen { list-style-position: inside; 
                          list-style-type: circle;    
                          width: 300px}
 .liste_aussen_ausgezogen {list-style-position: outside; 
                           list-style-type:    
                           circle ; width: 300px}

↑

list-style-type

IE4+ M1 N4+ O5+ Die CSS2-Werte werden zurzeit noch nicht von allen Browsern erkannt. Version: CSS1/Erweitert in CSS2 Erblich: Ja

list-style-type bestimmt das Aufzählungssymbol in einer Liste. Dabei stehen drei Arten von Symbolen zur Verfügung: alphabetisch, Glyphen und numerisch. In ungeordneten Listen können Sie zwischen gefüllten und ungefüllten Kreisen und Quadraten wählen. In geordneten Listen können Sie zwischen alphabetischen und numerischen Werten wählen. Sowohl in geordneten als auch in ungeordneten Listen kann das Listensymbol durch die Angabe von none unterdrückt werden.

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

Diese Eigenschaft wirkt nur bei Elementen, die Listenelemente darstellen können.

Viele Browser werden nur den gefüllten schwarzen Kreis erkennen, egal, welches Symbol angegeben wird. Mozilla 1 und Netscape 6 unterstützen die gesamte Bandbreite der Aufzählungssymbole, wenn die entsprechenden Zeichensätze installiert sind, während Opera 5 nur den gefüllten schwarzen Kreis und dezimale Zahlen darstellen kann.

circle (CSS1): gefüllte Kreise (bullets)

decimal (CSS1): 1, 2, 3 etc.

disc (CSS1): Standardsymbol

none (CSS1): Ausgabe ohne Listensymbol

lower-roman (CSS1): i, ii, iii, iv etc.

upper-roman (CSS1): I, II, III, IV etc.

square (CSS1): Vierecke

armenian (CSS2): traditionelle armenische Symbole

cjk-ideographic (CSS2): einfache ideographische Zahlen als Symbole

georgian (CSS2): traditionelle georgische Symbole

lower-greek (CSS2): klassische kleine griechische Zeichen als Symbole

hebrew (CSS2): traditionelle hebräische Zahlen als Symbole

hiragana (CSS2): die japanischen Hiragana-Zeichen als Symbole

hiragana-iroha (CSS2): die japanische Hiragana-Iroha-Ordnung als Symbole

katakana (CSS2): japanische Katakana-Zeichen als Symbole

katakana-iroha (CSS2): die japanische Katakana-Iroha-Ordnung als Symbole

lower-latin (CSS2): lateinische Kleinbuchstaben (a, b, c etc.) als Symbole

upper-latin (CSS2): lateinische Großbuchstaben (A, B, C etc.) als Symbole

Beispiel

.li_disc { list-style-type: disc}
.li_circle { list-style-type: circle}
.li_square { list-style-type: square}
.li_decimal { list-style-type: decimal}
.li_lower-roman { list-style-type: lower-roman}
.li_upper-roman { list-style-type: upper-roman}
.li_lower-greek { list-style-type: lower-greek}
.li_hebrew { list-style-type: hebrew}
.li_lower-latin { list-style-type: lower-latin}
.li_upper-latin { list-style-type: upper-latin}
.li_lower-greek { list-style-type: lower-greek}
.li_hiragana { list-style-type: hiragana}
.li_cjk-ideographic { list-style-type: cjk-ideographic} 

↑

list-style

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Ja

list-style kombiniert drei Eigenschaften in einer Deklaration: list-style-image und/oder list-style-position und/oder list-style-type.

list-style-image &| list-style-position &| list-style-type

Jede dieser drei Eigenschaften wurde in den vorangegangenen Absätzen beschrieben.

Beispiel

.liste_mond   { list-style: url(rouge.gif) inside}
.liste_innen  { list-style: upper-roman inside }
.liste_aussen { list-style: square outside}

↑

marker-offset

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein

marker-offset gibt den horizontalen Abstand (hier als offset oder dt. Einzug bezeichnet) zwischen der Symbolbox und der Aufzählungsbox an. Der Abstand wird an den beiden zueinander gewandten Kanten der beiden Boxen gemessen.

auto | length

Diese Darstellung einer Aufzählung verwendet eine Box für den prinzipiellen Inhalt der Aufzählung und eine Box für die Listensymbole. Ein Absatz der Liste liegt in der Aufzählungsbox, während sich das Aufzählungssymbol in der Symbolbox auf der linken Seite befindet. Das eröffnet die Möglichkeit, mehrere Listenstile in einer Aufzählung zu definieren und die Listensymbole können über die content-Eigenschaft definiert werden.

marker-offset setzt die Symbolbox in ein präzises Verhältnis zur Aufzählungsbox. Die Symbolbox kann sowohl innerhalb als auch außerhalb der Aufzählungsbox liegen, aber die Position der Symbolbox hat keine Auswirkung auf die Position der Aufzählungsbox.

auto ist die Voreinstellung und erlaubt dem Browser, den Abstand automatisch zu setzen.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit	Abkürzung	Maßeinheit	Abkürzung
Zentimeter	cm	Millimeter	mm
ems	em	Pica	pc
x-Höhe	ex	Pixel	px
Inch	in	Point	pt

↑