Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

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 "deprecated" 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.1Safari 1.0 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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 oder lower-latin = für ol-Listen: Nummerierung a.,b.,c.,d. usw.
upper-alpha oder upper-latin = für ol-Listen: Nummerierung A.,B.,C.,D. usw.
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.0Mozilla Firefox 1Konqueror 3.1Safari 1.0 Die folgenden, neueren CSS-Angaben sind ebenfalls möglich, werden bislang jedoch nur von Netscape ab Version 6.0, Firefox und teilweise von Opera, 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.1Safari 1.0 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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).

nach obennach unten

CSS 1.0Netscape 6.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/css/eigenschaften/listen.htm