CSS Referenz: Listen formatieren

0 | 19297 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Referenz: Listen formatieren" mit Ihrem Wissen!

Anzeige Hier werben

Listen lassen sich in CSS leicht modifizieren. Es ist möglich verschiedene Aufzählungszeichen zu definieren, eigene Aufzählungsgrafiken festzulegen und das layout verändern.

list-style: Kurzsschreibweise

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: list-style

Die Eigenschaft schließt die folgenden 3 Eigenschaften list-style-image, list-style-position und list-style-type ein.

Diese Eigenschaft kann auf die Tags <ol>, <ul> und Tags mit der Auszeichnung display: list-item; angewandt werden.

list-style-image: Listengrafik

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: list-style-image

Werte: none, url(), inherit

Mit list-style-image lässt sich eine eigene Grafik für die Listenpunkte festlegen.

list-style-position: Listenzeichen einrücken

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: list-style-position

Werte: outside, inside, inherit

Mit list-style-position lässt sich die Position der Liste verändern.

list-style-type: Listenart

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS1: list-style-type

Werte: none, circle, disc, decimal, lower-roman, upper-roman, decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, inherit

Mit list-style-type lässt sich die Aufzählungsart der Liste ändern.

Beispiel

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
ul {
  list-style:url(http://forum.webmasterpro.de/templates/v6/images/icon_latest_reply.gif) inside;
}
</style>

<ul>
 <li>Das ist ein Beispiel, wie man<br/>
 list-style verwenden kann.
 </li>
 <li>Das ist ein Beispiel, wie man<br/>
 list-style verwenden kann.
 </li>
 <li>Das ist ein Beispiel, wie man<br/>
 list-style verwenden kann.
 </li>
 <li>Das ist ein Beispiel, wie man<br/>
 list-style verwenden kann.
 </li>
</ul>

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "CSS Referenz: Listen formatieren" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Referenz: Listen formatieren" hier bearbeiten.