CSS, HTML und Javascript mit {stil}

CSS list-style-image • Bilder als Aufzählungszeichen in Listen

CSS list-style-image

CSS list-style-image legt ein Bild als Listensymbol für Listenelemente (Elemente vom Typ list-item) fest. Wenn das Bild verfügbar ist, ersetzt es das Listensymbol aus der CSS-Eigenschaft list-style-type. CSS list-style-type muss also nicht auf none gesetzt werden, sondern dient als Fallback, falls das Bild einmal nicht gefunden wird.

Die exakte Position für das Bild kann nicht via CSS list-style-image festgelegt werden. list-style-position kann zwar festlegen, ob Listenelemente eingezogen werden oder nicht, aber eine präzise Kontrolle über ein Bild als Listensymbol erzielt nur CSS background-image anstelle von list-style-image.

  • Montag
    • Sport
    • Mathematik
    • Physik
  • Dienstag
  • Mittwoch

CSS ul { margin-left: 0; } steuert den Einzug vor Listeneinträgen – bzw. setzt Listen linksbündig mit dem Text.

.buts {list-style-image:url(closed.svg) }
.active { list-style-image:url(open.svg) }

<ul class="buts"> 
    <li class="active">Montag
        <ul>
            <li>Sport</li>
            <li>Mathematik</li>
            <li>Physik</li>
        </ul>
    </li> 
    <li>Dienstag</li> 
    <li>Mittwoch</li> 
</ul>

list-style-image ist erblich – darum zeigen auch die ul-Elemente der zweiten Ebene Aufzählungssymbol.

IE7 zeigt kein Bild bei list-style-image, wenn für das Listenelement CSS float definiert ist. Ein Bug in IE7 verhindert zudem, dass IE das Bild verbirgt, wenn CSS list-style:none in Kurzschrift das Bild verbergen soll. Auch die Vererbung fehlt in IE7 für CSS list-style-image.

CSS list-style-image

Erblich: Ja

list-style-image
list-style-image ist die Adresse eines Bildes, das als Aufzählungssymbol in einer Liste benutzt wird.
Werte
<uri> | none | inherit
<uri>
<uri> ist der Pfad eines Bildes. Die Adresse muss in Klammern und von Hochkommas eingeschlossen sein.
none
none ist die Voreinstellung und gibt an, dass kein Bild eingespielt wird. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen nicht weiter angewendet werden.

Sonderzeichen und Bilder für Listen

Mit CSS content:before kann auf die kleinen Bilder als Listensymbol zugunsten von Sonderzeichen verzichtet werden. Internet Explorer unterstützt content:before ab IE8.

  • Montag
  • Dienstag
  • Mittwoch
  • Montag
  • Dienstag
  • Mittwoch
  • Montag
  • Dienstag
  • Mittwoch
ul.char { list-style-type:none;}
ul.char li:before { 
    color:green; 
    font-size: 1em;
    content: "♫ "; 
               |
               +-- Leerzeichen für den Abstand
}

Aufzählungszeichen in Listen lassen sich mit content:before flexibler durch Schriftgröße und -farbe anpassen als mit list-style-image.

Ein Bild mit content:before in Listen einsetzen. Das Bild kann optional mit position:absolut in ein relativ positioniertes li gesetzt werden, um seine Position mit top, bottom, left und right zu fixieren.

ul.charS { margin-left: 2em; list-style: none; }
ul.charS li { position: relative; line-height: 180%}
ul.charS li:before { 
     position:absolute;
     left: -2em;
     content: url(listen.svg) " " 
                   ^           ^
                   |           |
   url des Bildes  +           |
ein Leerzeichen Abstand lassen +
}

Jedes Listenelement mit eigenem Icon

:before kann jeden li-Element ein anderes Bild zuordnen.

  • Montag
  • Dienstag
  • Mittwoch
  • Donnerstag
  • Framstag
.icon li:nth-child(1):before {content: url(icon-1.png) " ";}
…
.icon li:nth-child(5):before {content: url(icon-5.png) " ";}
.icon li:nth-child(1):before {content: url(svg/icon-1.svg) " ";}
… 
.icon li:nth-child(5):before {content: url(svg/icon-5.svg) " ";}