Experimente mit Listen
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.
