CSS - Listen (li)

Für die Darstellung der Markierungen von Aufzählungs-Listen <ul> stehen in CSS1 drei Typen zur Verfügung sowie die Möglichkeit, ein eigenes Symbol zu definieren oder ganz darauf zu verzichten:

  • <ul style="list-style-type: disc">
  • der gefüllte Kreis entspricht auch der Voreinstellung
  • es braucht also keine Angabe definiert zu werden
  • <ul style="list-style-type: circle">
  • ein offener Kreis
  • und so sieht es aus
  • <ul style="list-style-type: square">
  • ein gefülltes Quadrat
  • und so sieht es aus
  • <ul style="list-style-type: none">
  • kein Symbol, aber die Einrückung bleibt
  • und so sieht es aus
  • <ul style="list-style-image: url('notes.gif')">
  • ein selbst definiertes Symbol
  • und so sieht es aus
 

Probleme nummerierter Listen mit dem list-style-type

Die Darstellungsmöglichkeiten nummerierter Listen <ol> sind theoretisch vielfältiger, siehe dazu SelfHTML. Doch leider werden längst nicht alle Optionen von allen Browsern unterstützt.

 

Das Problem mit dem linken Rand

Aufzählungslisten werden standardmäßig eingerückt dargestellt. Was im Fließtext der Übersichtlichkeit halber meist seine Berechtigung hat, ist in anderen Fällen jedoch nicht immer erwünscht.

  • Listen werden standardmäßig stark eingerückt
  • zwei
  • drei

Um den Abstand vom linken Rand per CSS zu verringern, müssen leider im Mozilla / Netscape 6+ und im Internet Explorer unterschiedliche Angaben gemacht werden. Während die Geckos mit padding arbeiten, verwendet der IE margin. Also muß man beide Angaben kombinieren, will man in den gängigen Browsern ein einheitliches Bild erzielen.

Wenn man jedoch einfach die Werte auf Null setzt, ergibt sich in beiden Browsern ein unerwünschtes Ergebnis:

  • <ul style="margin-left:0; padding-left:0">
  • zwei
  • drei

Auf den Cascading Stylesheets Seiten von Ulrike Häßler Stil mit <Stil> fand ich die einfachste Lösung:

  • <ul style="margin-left:0.5em; padding-left:0.5em">
  • zwei
  • drei
 

Menüs mit Hilfe von Listen

Das Navigationsmenü einer Webseite ist eigentlich nichts anderes als eine Liste von Links. Warum also dafür nicht auch eine Liste verwenden? Dazu habe ich einige Experimente mit Menüs auf einer eigenen Seite erstellt.

 

Weitere Informationen

Taming Lists
Umfangreiche Beispiele um Listen zu zähmen.