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.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Grafik für Listenzeichen |
| none |
|
Verwandte Eigenschaften aus der Kategorie: Listen (allgemein), Generated content, automatic numbering, and lists (CSS 2.1):
- content
- counter-increment
- counter-reset
- list-style
- Aktuelle Seite: list-style-image
- list-style-position
- list-style-type
- quotes
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.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu list-style-image:
- W3C Spezifikation:
http://www.w3.org/TR/css3-lists/#list-style-image
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
list-style - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
list-style-position
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:
- 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:
<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:
- 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
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!