Listen mit CSS schöner Darstellen

Listen sind zum Strukturieren von Informationen ein unverzichtbares Stilmittel beim Webdesign. Bei einer nummerierten Liste wird jedem Listeneintrag aufsteigend eine Nummer vorangestellt, bei einer Aufzählungsliste jedem Listeneintrag ein Aufzählungssymbol. Möchten Sie die vorgegebenen (HTML) Nummerierung oder das Symbol verändern gibt es zwei Möglichkeiten:

  1. für die Symbole Werte verwenden, die die CSS-Eigenschaft list-style-type anbietet
  2. mithilfe der CSS-Eingenschaft list-style-image eine eigene (ggf. animierte) Grafik als Symbol verwenden
  3. Liste und /  oder Listeneintrag mit CSS-Eigenschaften designen

1. Möglichkeit: Die Eigenschaft list-style-type

Das W3C sieht insgesamt 16 mögliche Werte für die Eigenschaft list-style-type vor. Da insbesondere der Internet Explorer bei den meisten Werten nur eine notdürftige Unterstützung gewährleistet, benutzen die meisten Webdesigner lediglich folgende Werte, die dafür allerdings in allen gängigen Browsern funktionieren:

  • disc = gefüllter Kreis
  • circle = leerer Kreis
  • square = gefülltes Quadrat
  • none = kein Listensymbol

Wenn Sie sich trotzdem an die anderen Werte heranwagen möchten, schauen Sie sich zunächst auf quirksmode.org die Kompatibilitätsliste an.

2. Möglichkeit: Die Eigenschaft list-style-image

Diese Eigenschaft ersetzt das standardmäßige Aufzählungszeichen. Für den Fall, dass das definierte Bild aus irgendeinem Grund nicht anzeigbar ist, kann zusätzlich eine Alternative mit list-style-type angegeben werden, ansonsten wird auf das Standardaufzählungszeichen zurückgegriffen. Beispiel:

1
2
3
4

ul {
  list-style-type: disc;
  list-style-image: url(http://www.css-einfach.de/downloads/pfeil5.gif);
}

Zusätzliche Effekte lassen sich hierbei durch den Einsatz animierter GIF-Grafiken erzielen.

3. Möglichkeit: Rein mit CSS-Eigenschaften designen

Hierzu kann einfach munter auf die CSS-Eigenschaften zurückgegriffen, die zur Schriftformatierung zur Verfügung stehen. Bei einer nummerierten Liste kann sowohl die Durchnummerierung wie der Listeneintrag formatiert werden, bei Aufzählungslisten freilich nur der Listeneintrag. Nachfolgend ein Beispiel für eine nummerierten Liste:

1
2
3
4
5
6
7
8
9
10

ol {
font-style: italic;
font-size: xx-large;
font-family: fantasy;
}
ol p {
font-style: normal;
font-size: medium;
font-family: sans-serif;
}

Kategorien: Anfänger, Webdesign.
Schlagwörter: .

Einen Kommentar schreiben