SELFHTML

Listenformatierung

Informationsseite

nach unten Allgemeines zur Listenformartierung
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 Listenformartierung

Die Style-Sheet-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 Style-Sheet-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.0 list-style-type (Darstellungstyp)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style-type</title>
</head><body bgcolor="FFFFFF" text="#000000">

<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>disk</i></h4>
<ul style="list-style-type:disk">
<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. inclusive erweitertem Latin-Zeichensatz
upper-latin = für ol-Listen: Nummerierung A.,B.,C.,D. usw. inclusive erweitertem Latin-Zeichensatz
disc = für ul-Listen: Dateisymbol als Bulletzeichen
circle = für ul-Listen: rundes Bulletzeichen
square = für ul-Listen: rechteckiges Bulletzeichen
none = kein Bulletzeichen, keine Nummerierung

CSS 2.0Netscape 6.x Die folgenden, neueren CSS-Angaben sind ebenfalls möglich, werden bislang jedoch nur von Netscape ab Version 6.1 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.0 list-style-position (Listeneinrückung)

Sie können bestimmen, wie sich Bulletzeichen oder Nuermerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style-position</title>
</head><body bgcolor="FFFFFF" text="#000000">

<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.0 list-style-image (eigene Bullet-Grafik)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style-image</title>
</head><body bgcolor="FFFFFF" text="#000000">

<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 Bulletzeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- 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.0 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:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>list-style</title>
</head><body bgcolor="FFFFFF" text="#000000">

<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
 

© 2001 E-Mail selfhtml@teamone.de