ul-Listen mit CSS-Listeneigenschaften im Browser
Für <ul>- und <ol>-Listen stehen in CSS spezielle Formatierungsmöglichkeiten zur Verfügung. Dazu gehören bei ungeordneten Listen (ul) etwa grafische Aufzählungszeichen, und bei geordneten Listen (ol) speziellere Nummerierungen wie römisch oder alphabetisch.
Für die Listengestaltung von ul-Listen stehen folgende CSS-Eigenschaften zur Verfügung:
Ebenso wie bei anderen Sets von Einzeleigenschaften gibt es auch in diesem Fall eine CSS-Eigenschaft namens list-style für zusammenfassende Angaben.
<h4>ul-Liste mit Darstellungstyp <i>disc</i></h4> <ul style="list-style-type: disc"> <li>Probieren geht<br>über Studieren</li> <li>Liebe geht<br>über Triebe</li> <li>Tante geht<br>über Kante</li> </ul> <h4>ul-Liste mit Darstellungstyp <i>circle</i> und Position <i>inside</i></h4> <ul style="list-style-type: circle; list-style-position: inside"> <li>Probieren geht<br>über Studieren</li> <li>Liebe geht<br>über Triebe</li> <li>Tante geht<br>über Kante</li> </ul> <h4>ul-Liste mit eigener Bullet-Grafik <i>disc</i></h4> <ul style="list-style-image: url(bluemchen.gif)"> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante geht über Kante</li> </ul>
Mit list-style-type: können Sie im Zusammenhang mit ul-Listen ein Standard-Aufzählungszeichen bestimmen. Folgende Angaben sind seit langem möglich: disc (gefüllter Kreis), circle (leerer Kreis) und square (gefülltes Quadrat). Mit CSS3 kommen weitere Aufzählungszeichen hinzu: box (leeres Quadrat), diamond (Diamant-Symbol, z.B. Zeichen mit Rhombus-Form), check (ein ✓-Symbol), und hyphen (Bindestrich).
Wichtig ist auch die mögliche Wertzuweisung none. Damit verhindern Sie ein Aufzählungszeichen. Das mag zunächst widersinnig erscheinen. Doch ungeordnete Listen sind das semantische Mittel der Wahl etwa für Navigationsmenüs. Und dort sollen die Listen nicht unbedingt wie Listen im Fließtext erscheinen, sondern mit Hilfe diverser CSS-Eigenschaften eher wie ein Menü in einer Anwendung reagieren.
Mit list-style-position: können bestimmen, wie der Listeninhalt eingerückt wird. Mit dem Schlüsselwort inside bewirken Sie eine eingerückte Darstellung. Default ist outside (ausgerückt). Die ersten beiden Listen im obigen Beispiel enthalten erzwungende Zeilenumbrüche (<br>), damit die Unterschiede zwischen den beiden Angaben sichtbar werden. Die erste Liste im Beispiel (ul-Liste mit Darstellungstyp disc) enthält keine Angabe zu list-style-position:, was outside entspricht. Die zweite Liste dagegen enthält explizit die Notation list-style-position: inside.
Mit list-style-image: url(URL-Adresse) können Sie eine Grafik als Aufzählungszeichen bestimmen. Als Grafikdateitypen sollten Sie die in HTML üblichen Formate GIF, PNG oder JPG verwenden. Die Grafik sollte nicht größer als ein kleines Icon sein. Bei der URL-Adresse ist sind alle Regeln und Möglichkeiten der Referenzierung erlaubt und möglich.
Bei der zusammenfassenden Eigenschaft list-style (kommt im obigen Beispiel nicht vor) sind Angaben möglich wie <ol style="list-style: url(../zeigefinger.png) inside">.
Für die Listengestaltung von ol-Listen werden folgende CSS-Eigenschaften angeboten:
Auch in diesem Fall können Sie die CSS-Eigenschaft list-style für zusammenfassende Angaben verwenden.
<h4>ol-Liste mit Darstellungstyp <i>decimal</i></h4> <ol style="list-style-type: decimal"> <li>Tagesordnung</li> <li>Pause</li> <li>Vorbesprechung</li> <li>Mittagessen</li> <li>Vortrag zum Thema "Komme nie zu früh zur Sache!"</li> <li>Pause</li> <li>Gemütlicher Ausklang</li> </ol> <h4>ol-Liste mit Darstellungstyp <i>lower-roman</i></h4> <ol style="list-style-type: lower-roman"> <li>Tagesordnung</li> <li>Pause</li> <li>Vorbesprechung</li> <li>Mittagessen</li> <li>Vortrag zum Thema "Komme nie zu früh zur Sache!"</li> <li>Pause</li> <li>Gemütlicher Ausklang</li> </ol>
Im Zusammenhang mit nummerierten Listen hat das W3-Konsortium mittlerweile an jede nur erdenkliche Form der Nummerierung gedacht. Relativ bedenkenlos sind davon in der Praxis jedoch bislang nur diejenigen Formen verwendbar, die vor CSS3 eingeführt wurden. Das obige Beispiel zeigt zwei mal die gleiche Liste — einmal mit Dezimalzahlen (decimal) als Nummerierung, und einmal mit kleinen römischen Ziffern (lower-roman).
In CSS 1.0 wurden folgende Schlüsselwörter eingeführt: decimal (Nummerierung 1.,2.,3.,4. usw.), lower-roman (Nummerierung i.,ii.,iii.,iv. usw.), upper-roman (Nummerierung I.,II.,III.,IV. usw.), lower-alpha oder lower-latin (Nummerierung a.,b.,c.,d. usw.), sowie upper-alpha oder upper-latin (Nummerierung A.,B.,C.,D. usw.).
In CSS 2.0 kamen folgende hinzu: lower-greek (Nummerierung mit griechischen Buchstaben α., β., γ., δ. usw.), hebrew (Nummerierung mit den hebräischen Buchstaben), decimal-leading-zero (Nummerierung mit führender 0: 01.,02.,03.,04., … 98.,99. usw.), cjk-ideographic (Nummerierung mit ideographischen Zeichen), hiragana (Nummerierung in Japanisch: a, i, u, e, o, ka, ki, … ), katakana (Nummerierung in Japanisch: A, I, U, E, O, KA, KI, … ), hiragana-iroha (Nummerierung in Japanisch: i, ro, ha, ni, ho, he, to, … ), und katakana-iroha (Nummerierung in Japanisch: I, RO, HA, NI, HO, HE, TO, … ).
CSS3 erweitert diese Möglichkeiten um alghorithmische Nummerierungssysteme wie armenian und lower-armenian, einem additiven Nummerierungsschema für Zahlen von 1 bis 99999999, ethiopic-numeric (äthiopische Nummerierung), georgian (additives Nummerierungsschema für Zahlen von 1 bis 19999), japanese-formal, japanese-informal, trad-chinese-formal, trad-chinese-informal, simp-chinese-formal und simp-chinese-informal (fernöstliche Nummerierungsvarianten mit Gruppen- und Ziffernmarker), syriac (nahöstliches Nummerierungssystem), tamil (tamilische Nummerierung) und upper-armenian (armenische Nummerierung). Bei Zahlensystemen ermöglicht CSS3 zusätzlich zu den bereits bekannten Systemen viele weitere Systeme aus aller Welt und aus der IT-Welt: arabic-indic, binary, bengali, cambodian, devanagari, gujarati, gurmukhi, kannada, khmer, lao, lower-hexadecimal, malayalam, mongolian, myanmar, octal, oriya, persian, telugu, tibetan, thai, upper-hexadecimal und urdu. Ähnlich verhält es sich bei den Möglichkeiten alphabetischer Nummerierung. Hier unterstützt CSS3 zusätzlich die Angaben afar, amharic, amharic-abegede, cjk-earthly-branch, cjk-heavenly-stem, ethiopic, ethiopic-abegede, ethiopic-abegede-am-et, ethiopic-abegede-gez, ethiopic-abegede-ti-er, ethiopic-abegede-ti-et, ethiopic-halehame-aa-er, ethiopic-halehame-aa-et, ethiopic-halehame-am-et, ethiopic-halehame-gez, ethiopic-halehame-om-et, ethiopic-halehame-sid-et, ethiopic-halehame-so-et, ethiopic-halehame-ti-er, ethiopic-halehame-ti-et, ethiopic-halehame-tig, hangul, hangul-consonant, lower-norwegian, oromo, sidama, somali, tigre, tigrinya-er, tigrinya-er-abegede, tigrinya-et, tigrinya-et-abegede und upper-norwegian.
Außerdem erlaubt CSS3 die symbolischen Angaben asterisks (Sternchen-Nummerierung *, **, ***, ****, …), sowie footnotes (Nummerierung *, ⁑, †, ‡, **, ⁑⁑ usw.).
Die CSS-Eigenschaften für Listeneinrückung (list-style-position) und die zusammenfassende Angabe zu list-style funktioniert bei geordneten Listen genauso wie bei ungeordneten Listen.
Bei list-style-type werden je nach Browser nur ein Teil der möglichen Angaben interpretiert.
Leider gibt es für den Abstand zwischen Aufzählungszeichen oder Nummerierung und dem Inhalt des zugehörigen Listeneintrags keine spezielle CSS-Eigenschaft. Auch für die linksbündige Ausrichtung des Aufzählungs- oder Nummerierungszeichens zum übrigen Text gibt es keine eindeutige Angabe. Die CSS-Eigenschaften, mit deren Hilfe sich die Anzeige diesbezüglich steuern lässt, sind margin-left und padding-left (siehe Außenrand und Abstand und Innenabstand).
<ul style="margin-left: 0; padding-left: 0"> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante geht über Kante</li> </ul> <ul style="margin-left: 0em; padding-left: 1.5em"> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante geht über Kante</li> </ul> <ul style="margin-left: 1.5em; padding-left: 0em"> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante geht über Kante</li> </ul> <ul style="margin-left: 1.5em; padding-left: 1.5em"> <li style="padding-left: 2.5em">Probieren geht über Studieren</li> <li style="padding-left: 1.25em">Liebe geht über Triebe</li> <li>Tante geht über Kante</li> </ul> <ul style="margin-left: 0.6em; padding-left: 0.6em"> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante geht über Kante</li> </ul>
Im Beispiel wird fünf mal die gleiche ul-Liste mit unterschiedlichen Angaben zu padding-left und margin-left definiert. Werden beide Werte wie in der ersten Liste auf 0 gesetzt, hat das die gleiche Wirkung wie list-style-type: none — das Aufzählungszeichen wird gar nicht mehr angezeigt.
Die zweite und die dritte Liste im Beispiel lassen jeweils eine der beiden Eigenschaften auf 0 und setzen die andere auf 1.5em. Das muss nicht unbedingt — wie in der obigen Abbildung, die den Output von Google Chrome zeigt — in allen Browsern gleich aussehen. So beachtet etwa der MS Internet Explorer nur die margin-left-Eigenschaft, während ihm padding-left egal ist. Bei den meisten anderen Browsern ist es umgekehrt. Um browser-übergreifend eine ordentliche Anzeige zu erhalten, ist es deshalb am besten, beide Eigenschaften zu verwenden, und ihnen außerdem den gleichen Wert zuzuweisen, so wie in der letzten Liste im obigen Beispiel. Der dort verwendete Wert von 0.6em ist übrigens ein erprobter Wert, um eine linksbündige Ausrichtung des Aufzählungszeichens um übrigen Text zu erreichen und gleichzeitig einen mittleren, typischen Abstand zwischen Aufzählungszeichen und Inhalt des Listeneintrags.
Um den Abstand zwischen Aufzählungszeichen/Nummerierung und Inhalt des Listeneintrags zu beeinflussen, müssen Sie anstelle des Listenelements (ul oder ol) die enthaltenen li-Elemente formatieren, so wie im obigen Beispiel in der vierten Liste. Das ist natürlich auch mit Hilfe zentral notierter Selektoren möglich und so auf alle li-Elemente oder li-Elemente mit bestimmten Eigenschaften anwendbar. Das obige Beispiel nutzt die Inline-Formatierung mittels style-Attribut, um unterschiedliche Möglichkeiten zu demonstrieren.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.