SELFHTML

Listenformatierung

Informationsseite

nach unten Allgemeines zur Listenformatierung
nach unten list-style-type (Darstellungstyp)
nach unten list-style-position (Listeneinrückung)
nach unten list-style-image (eigene Bullet-Grafik)
nach unten list-style (Listendarstellung allgemein)

 nach unten 

Allgemeines zur Listenformatierung

Die Stylesheet-Angaben für Listen beziehen sich speziell auf die HTML-Elemente ul (Seite Aufzählungslisten) und ol (Seite nummerierte Listen).

Sie können mit Hilfe von Stylesheet-Angaben die gleichen Formatierungen erzwingen, wie es in den einleitenden HTML-Tags <ul> und <ol> mit Hilfe von zusätzlichen Attributen möglich ist. Die entsprechenden Attribute sind in HTML 4.0 jedoch alle als "depracated" ausgewiesen, also als künftig unerwünscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden, um solche Listen zu formatieren. Neben den Möglichkeiten, die HTML bietet, stehen auch erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, etwa die Möglichkeit, Listen aus- statt einzurücken oder eine eigene Grafik als Aufzählungssymbol zu definieren.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.2 list-style-type (Darstellungstyp)

Für Aufzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style-type</title>
</head><body>

<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>disc</i></h4>
<ul style="list-style-type:disc">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>circle</i></h4>
<ul style="list-style-type:circle">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<!--usw.-->

<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>decimal</i></h4>
<ol style="list-style-type:decimal">
<li>Tagesordnung</li>
<!--usw.-->
</ol>
<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>lower-roman</i></h4>
<ol style="list-style-type:lower-roman">
<li>Tagesordnung</li>
<!--usw.-->
</ol>

<!--usw.-->
</body></html>

Erläuterung:

Mit list-style-type: können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben.

decimal = für ol-Listen: Nummerierung 1.,2.,3.,4. usw.
lower-roman = für ol-Listen: Nummerierung i.,ii.,iii.,iv. usw.
upper-roman = für ol-Listen: Nummerierung I.,II.,III.,IV. usw.
lower-alpha = für ol-Listen: Nummerierung a.,b.,c.,d. usw.
upper-alpha = für ol-Listen: Nummerierung A.,B.,C.,D. usw.
lower-latin = für ol-Listen: Nummerierung a.,b.,c.,d. usw. inklusive erweitertem Latin-Zeichensatz
upper-latin = für ol-Listen: Nummerierung A.,B.,C.,D. usw. inklusive erweitertem Latin-Zeichensatz
disc = für ul-Listen: gefüllter Kreis als Bullet-Zeichen
circle = für ul-Listen: leerer Kreis als Bullet-Zeichen
square = für ul-Listen: rechteckiges Bullet-Zeichen
none = kein Bullet-Zeichen, keine Nummerierung

CSS 2.0Netscape 6.xMozilla Firefox 1Konqueror 3.3Safari 1.2 Die folgenden, neueren CSS-Angaben sind ebenfalls möglich, werden bislang jedoch nur von Netscape ab Version 6.1, Firefox und teilweise Konqueror und Safari interpretiert:

lower-greek = für ol-Listen: Nummerierung mit den griechischen Buchstaben: α., β., γ., δ. usw.
hebrew = für ol-Listen: Nummerierung mit den hebräischen Buchstaben
decimal-leading-zero = für ol-Listen: Nummerierung mit führender 0: 01.,02.,03.,04., ... 98.,99. usw.
cjk-ideographic = für ol-Listen: Nummerierung mit ideographischen Zeichen
hiragana = für ol-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... )
katakana = für ol-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... )
hiragana-iroha = für ol-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... )
katakana-iroha = für ol-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE, TO, ... )

 nach obennach unten 

CSS 1.0Netscape 6.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.2 list-style-position (Listeneinrückung)

Sie können bestimmen, wie sich Bullet-Zeichen oder Nummerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style-position</title>
</head><body>

<h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>inside</i></h4>
<ol style="list-style-position:inside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>

<h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>outside</i></h4>
<ol style="list-style-position:outside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>

</body></html>

Erläuterung:

Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.

inside = eingerückt.
outside = ausgerückt (Voreinstellung).

Beachten Sie:

Netscape 4.x interpretiert diese Angabe noch nicht.

 nach obennach unten 

CSS 1.0Netscape 6.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.2 list-style-image (eigene Bullet-Grafik)

Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style-image</title>
</head><body>

<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit eigener Bullet-Grafik</h4>
<ul style="list-style-image:url(list_style_image.gif)">
<li>&#160;<a href="../../../html/index.htm"><b>HTML/XHTML</b></a><br>
Die Sprache des Web</li>
<!--usw.-->
</ul>

</body></html>

Erläuterung:

Mit list-style-image:url([Dateiname]) können Sie eine Grafik für das eigene Bullet-Zeichen angeben. Anstatt einer Grafikreferenz ist auch der Wert none erlaubt. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF-, PNG- oder JPG-Grafiken benutzen.

Im Beispiel wird vorausgesetzt, dass sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Seite Einbinden von Grafiken in HTML.

Beachten Sie:

Netscape 4.x interpretiert diese Angabe noch nicht.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.3Safari 1.2 list-style (Listendarstellung allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
nach oben list-style-type (Darstellungstyp)
nach oben list-style-position (Listeneinrückung)
nach oben list-style-image (Eigene Bullet-Grafik)

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style</title>
</head><body>

<h4>Nummerierte Liste &lt;ol&gt; mit den Angaben <i>lower-roman inside</i></h4>
<ol style="list-style:lower-roman inside">
<li>bei Anette vorbeischauen<br>
und Gr&uuml;&szlig;e an Gundula ausrichten</li>
<!--usw.-->
</ol>

</body></html>

Erläuterung:

Mit list-style: können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder nummerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

Beachten Sie:

Netscape 4.x interpretiert nur einen Teil dieser Angaben.

 nach oben
weiter Seite Tabellenformatierung
zurück Seite Hintergrundfarben und -bilder
 

© 2005 Seite Impressum