CSS: HTML Liste mit verschiedenen Icons listen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • CSS: HTML Liste mit verschiedenen Icons listen

    Hi Leute,

    ich habe eine ganz normale HTML Tabelle (mit <ul> und <li>).

    Als Aufzählung werden Icons benutzt mit Hilft von CSS.

    Quellcode

    1. <ul style='list-style-image:url(icons/x.png)'>
    2. <li>Punkt 1</li>
    3. <ul>
    4. <li>Punk1.1</li>
    5. <li>Punkt1.2</li>
    6. <li>Punkt1.3</li>
    7. </ul>
    8. <li>Punkt2</li>
    9. </ul>


    Jetzt wird hat jede Zeile ein Bild als Aufzählungspunkt.

    Bei bestimmten Punkten möchte ich aber andere Icons verwenden, z.B. bei Punkt1.2

    Geht das?

    Das sind soz. Aufgaben, die noch nicht erledigt sind, erledigte bekommen das ein anderes Icon.

    Grüße

  • Moin moin,

    ich finde den Befehl einfach nicht, um mittels CSS die entsprechenden Icons einzeln zu setzen.
    Hat den vllt jemand parat?

    Und außerdem:

    Wenn ich das über eine externe CSS Datei mache (so wie ich es auch eigentlich machen will) werden die Icons nicht gesetzt.

    externe CSS:

    Quellcode

    1. ul.test { color:red; list-style-image:url(icons/x.png);}


    html Datei:

    Quellcode

    1. <ul class='test'>


    Die Liste wird rot, aber das Icon wird nicht gesetzt.. komisch?

    Vielen Dank und liebe Grüße!

  • Hi,

    list-style-image ist nicht auf <li> anwendbar.
    Da müsstest du dann nicht nur eine Klasse setzen, sondern eine ganz neue Liste mit der entsprechenden Klasse verschachteln um das icon zu wechseln.

    url() bezieht sich immer relativ auf die Datei. Wenn du das in einer externen css Datei nutzt, dann mussst du den Pfad von der Css Datei zu dem Bild angeben.