Listeneigenschaften

Die Verwendung von Listen in (X)HTML war bisher eher eingeschränkt, da die Darstellung im Browser wenig ansehnlich und kaum manipulierbar war – zum Teil wurden Listen über Tabellenkonstruktionen "nachgebaut", um eine akzeptable Formatierung zu erreichen. Mittels CSS können nun Listen vielseitig modifiziert und daher eingesetzt werden, z.B. für ein Navigationsmenü.
 
 

list-style-type

Mit liste-style-type kann die Aufzählungsform definiert werden (ähnlich dem Attribute type).

Werte für <ul>:
circle
disc
square
none

Werte für <ol>:
decimal
decimal-leading-zero (nicht bei IE 5 Mac, Safarie)
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek (nicht bei IE 5 Mac)
lower-latin (nicht bei IE 5 Mac)
upper-latin (nicht bei IE 5 Mac)
none

Es existieren noch weitere Aufzählungsformen, die zur Zeit aber nicht ausreichend unterstützt werden.

Standardeinstellung: disc
Vererbung: ja
Element: Listen

Beispiel:
<ul style="list-style-type: none">

  • Eintrag Nummer Eins
  • Eintrag Nummer Zwei
  • Eintrag Nummer Drei.

</ul>

Beispiele für geordnete Listen

demo: ol {list-style-type: lower-alpha}
 

 
list-style-position

Mit list-style-position kann definiert werden, ob die Aufzählungszeichen für Listeneinträge innerhalb des Textes oder außerhalb (Standard) plaziert werden.

Werte:
inside
outside

Standardeinstellung: outside
Vererbung: ja
Element: Listen

Beispiel:
<ol style="list-style-position: inside">

  1. Eintrag Nummer Eins: So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.
  2. Eintrag Nummer Zwei:So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.
  3. Eintrag Nummer Drei: So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</ol>

demo: ol {list-style-position: inside}
 

 
liste-style-image

An Stelle der "berühmt-berüchtigten" Aufzählungszeichen ungeordneter Listen ist es möglich, eine (selbst erstellte) Grafik-Datei als Zeichen anzugeben.

Werte:
none
url(pfad_zur/grafik.gif)

Standardeinstellung: none
Vererbung: ja
Element: Listen

Beispiel:
<ul style="list-style-image: url(beispiele/0209_css_liste_pfeil.gif)">

  • Eintrag Nummer Eins
  • Eintrag Nummer Zwei
  • Eintrag Nummer Drei.

</ul>

demo: ol {list-style-image: url(pfeil.gif)}
Aufgabe Listen in Datei aufgabe_css03