CSS/Eigenschaften/Listenformatierung/list-style-image

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft list-style-image können Sie eine eigene geeignete Grafik als Aufzählungssymbol bestimmen.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<style> li { list-style-image: url(Pdf.png); } </style>
<h1>archivierte Rechnungen</h1> <ul> <li><a href="#">2016001</a></li> <li><a href="#">2016002</a></li> </ul>
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 Einbinden von Grafiken in HTML.

Mit list-style-image: url(Pfad); können Sie den Pfad zu einer Grafik angeben. Anstatt einer Grafikreferenz ist auch der Wert none erlaubt.

Beachten Sie: Das Verhalten der Browser weicht leicht voneinander ab. Einige Browser beschneiden die Grafik auf die Höhe des Listenelements, andere vergrößern das Listenelement damit die Grafik vollständig sichtbar ist. Ebenso weicht die Ausrichtung ggf. um einige Pixel ab und kann nicht korrigiert werden. Einen Workaround für diesen Umstand bietet die Verwendung einer Hintergrund-Grafik oder einer Grafik als generierter Inhalt (siehe background-image bzw. content).

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML