Stil mit {stil}

Nov 2007

CSS list-style für Listen und Aufzählungen
(für ul- und ol-Tags)

Für Listen mit ul- und ol-Tags stellt CSS eigene Stile zur Verfügung, die z.B. den Punkt vor dem Listenelement unterdrücken oder durch ein eigenes Bild ersetzen.

HTML erzeugt ungeordnete Listen (mit dem <ul>-Tag) und geordnete Listen (mit dem <ol>-Tag) und fügt Listensymbole und Zahlen automatisch ein.

• Ungeordnete Aufzählungen werden durch gefüllte Kreise eingeleitet, gefolgt von einem Einzug und einem Text.
• Geordnete Aufzählungen werden durch eine Folge von Zahlen eingeleitet, gefolgt von einem Einzug und einem Text.

Die beliebtesten Stile für Listen sind sicher die Unterdrückung des Listenpunkts und das Bild vor dem Listeneintrag.

ul { list-style-type: none; }        // Zeigt Listen ohne Punkt an

ul.knopf {                           // Zeigt ein Bild anstelle des Listenpunkts
   list-style-image: url(knopf.gif);
}

Für die Listenelemente li werden dieselben Stile verwendet wie für die Formatierung von Fließtext – font, margin, padding, border … . Sie haben keine eigenen Stile.

list-style CSS-Kurzschrift für alle Eigenschaften für Listen

IE4+ M1 N6 O5+ S1 CSS1 Erblich: Ja

list-style

kombiniert drei Eigenschaften in einer Regel

Werte

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

Listen für die Navigationsleiste

• Listen und Aufzählungen
  • list-style-type
  • list-style-image
  • list-style-position
  • list-style-type
• Abstand margin und padding
  • CSS-Eigenschaft margin
  • CSS-Eigenschaft padding
• Positionierung
  • HTML-Elemente positionieren
  • Schwebende Element mit float
  • Umfließen beenden: clear
• Tabellen formatieren
  • table-layout
  • Tabellenrahmen
  • Abstand vom Tabellenrahmen
• Text und Schrift mit CSS
  • text-align
  • Abstand der Buchstaben
  • Text einrücken
  • Groß- und Kleinschreibung

Die ungeordnete Liste mit dem ul-Tag hat in den letzten Jahren Karriere gemacht: Dank der hierarchischen Struktur und der einfachen Verschachtelung ist die Kombination von ul- und li-Tags zu einem beliebten Werkzeug für die Navigation geworden. Selbst aufklappende Navigationsmenüs sind mit einfachen CSS-Regeln ohne Javascript möglich.

In Internet Explorer funktioniert das allerdings erst ab Version 7.

ul#demo { width: 200px; list-style: none; }
ul#demo ul { list-style: none; padding-left: 0em; margin-left: 0em; }

ul#demo li ul { display: none; }
ul#demo li:hover ul { display: block; }

Listen mit römischen Ziffen, Buchstaben und Glyphen

CSS bietet darüber hinaus die Erzeugung von weiteren Listensymbolen, kann Listensymbole aus Bildern erzeugen, geordnete Listen durch Ziffern, Buchstaben und Glyphen realisieren.

Der linke Einzug

Der Abstand der Listen vom linken Rand des umfassenden Blocks ist allerdings keine besondere Eigenschaft für ungeordnete Listen oder numerierte Aufzählungen mit dem ul- bzw. ol-Tag, sondern resultiert aus den CSS-Eigenschaften margin oder padding, die alle grafischen Browser den Aufzählungen per Voreinstellung verleihen.

zurück zum Seitenanfang