Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: list-style-image, Kategorien: Listen (allgemein), Generated content, automatic numbering, and lists (CSS 2.1)

Grafik für Listenzeichen

Gibt eine Grafik an, die als Listenzeichen verwendet wird.

CSS-Eigenschaft: list-style-image
KurzbeschreibungWerteStandardwertKategorieHinweis
Grafik für Listenzeichen
  • <uri>
  • none
  • inherit
none
Allgemein:
Listen
CSS 2.1:
Generated content, automatic numbering, and lists
 

Verwandte Eigenschaften aus der Kategorie: Listen (allgemein), Generated content, automatic numbering, and lists (CSS 2.1):

Folgendes ist beim Einsatz von list-style-image zu beachten:

  • list-style-image referenziert eine Grafik, die als Listensymbol verwendet wird.
  • Es sind relative, aber auch absolute URLs möglich. Unter HTTP-Verbindungen können Grafiken auch von fremden Servern eingebunden werden. Bindet man unter einer sicheren Verbindung (HTTPS) eine Grafik von einem anderen Server, erhält man eine Sicherheitswarnung.
  • Ist neben der list-style-image auch eine Angabe zum list-style-type gemacht, erhält die Grafik höhere Priorität und der list-style-type wird ignoriert. Steht die Grafik selber nicht zur Verfügung, greift dann der list-style-type.
  • Grafiken als Listenzeichen können sowohl an ULs bzw. OLs geknüpft werden, aber auch an einzelnen LIs. In OLs ersetzt die Grafik das Aufzählungszeichen.
  • Über list-style-position wird die die Position des Listenzeichens bestimmt. Per outside wird das Listenzeichen der Liste vorangestellt, per inside wird das Listenzeichen in den Textfluss eingeschoben. Dies kann entweder über die CSS Eigenschaft list-style-position selber, oder über die Kurzschreibweise list-style gesteuert werden.
Browserunterstützung von list-style-image
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu list-style-image:



Beispiele

HTML:

<ul class="doImg">
   <li>eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins</li>
   <li>zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei</li>
   <li>drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei</li>
</ul>

CSS:

.doImg {
   list-style-image: url('img/bullet.png');
}
/* Standarddarstellung, Position ist per Default outside. */

Beispiel Nr. 1 So sieht's aus:

  • eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins
  • zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei
  • drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei
 

HTML:

<ol class="doExtern">
   <li>eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins</li>
   <li>zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei</li>
   <li>drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei</li>
</ol>

CSS:

.doExtern {
   list-style-image: url('http://daik.de/_images/navi-icon-aktiv.png');
}
/* Beispiel für die Einbindung einer Grafik von einem anderen Server. Auf einer Seite, die eine sichere Verbindung HTTPS hat, käme es hiermit zu einer Sicherheitswarnung. */

Beispiel Nr. 2 So sieht's aus:

  1. eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins
  2. zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei
  3. drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei
 

HTML:

<ul>
   <li>eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins</li>
   <li class="doImg">zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei</li>
   <li>drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei</li>
</ul>

CSS:

/* Hier die Zuweisung an ein einzelnes LI. Für die anderen LIs wird das Default-Bullet dargestellt. */

Beispiel Nr. 3 So sieht's aus:

  • eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins
  • zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei
  • drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei
 

HTML:

<ol class="doImg doInside">
   <li>eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins</li>
   <li class="doImg">zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei</li>
   <li>drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei</li>
</ol>

CSS:

.doInside {
   list-style-position: inside;
}
/* list-style-position schiebt hier die Grafik in den Textfluss. */

Beispiel Nr. 4 So sieht's aus:

  1. eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins eins
  2. zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei zwei
  3. drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei drei
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 5.189 sec.

Browser-Marktanteile