li Element mit Bild

html.de-Forum HTML, XHTML & CSS
1

Hallo Community,
Ich habe folgende Frage:

Wie kann ich ein li Element per CSS so formatieren, dass statt dem Punkt ein Bild da ist?

Danke für Antworten im Vorraus:D

2

Das geht mit „list-style-image“:
list-style-image: Aufzählungsgrafik: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

3

Oder, falls du die Grafik zusätzlich im Rahmen von Links mit einem Hovereffekt versehen willst, indem du die Grafik dem a-Link als Hintergrundgrafik zuweist wie hier unter Ziffer 2ff veschrieben:
Menüs mit Hintergrundgrafiken
Navigation mit Hintergrundgrafik

4

Also ungefähr so:

ul { list-style-image: url(images/bulletrd.gif); }

5

So sollte es klappen!

6

Kann ich dem ul auch noch eine ID zuweisen,
so das nicht alle uls so formatiert sind, sondern nur die, wo ich zum Beispiel

    hinschreibe?

    7

    sollte so gehen, die id musst du im CSS-Code nur auch dazuschreiben.

    8

    Naja:D,
    Bin noch ziemliger Anfänger in CSS.
    Und wäre eine Klasse nicht schlauer?
    Wenn ja, wie weist man eine zu?

    Habe hier in einem anderen Thread gelesen, dass IDs nur einmal in einer Datei verwendet werden dürfen.
    Dewswegen die Frage mit den Klassen.

    9

    stimmt, du darfst jede ID nur einmal verwenden.
    Wenn du auch nicht vorhast, sie einmal in einem Dokument zu verwenden kannst du also ruhig ids nehmen.

    Wenn es aber vorkommen kann, dass du einen bestimmten Style öfters in einem Dokument verwenden möchtest ist es besser, du nummst Klassen (class).
    Die kannst du beruhigt öfters verwenden.

    10

    Siehe Oben :D.
    Natürlich in CSS.

    11 
    .listimg {list-style-image: url(button.gif);}

    [CODE]

    • Listeneintrag 1
    • Listeneintrag 2
    [/CODE]
    12

    genau so wie IDs auch. Nur statt der # nimmst du in der CSS-Datei einen . und schreibst

      // zu langsam :frowning:

    13

    Danke für eure (wie immer) supertolle Hilfe!:smiley:

    Link: TrackMania Nations Fans

    EDIT

    Ist es normal, dass das nur im Firefox (3.1) klappt, nicht aber im IE (8 )?

    EDIT2

    FF 3.1 : http://img7.myimg.de/ff30410de.png

    IE 8.0 : http://img7.myimg.de/ie804964.png

    EDIT3

    FF 3.1 : ImageShack - Hosting :: ff30eg1.png

    IE 8 : ImageShack - Hosting :: ie8sv0.png

    14

    Setze mal zunächst di Abstände mit ul, li {margin: 0; padding: 0;} generell auf Null.

    Dann definiere sie wieder, z.B.

    .car {
    list-style-image: url(img/car.png);
    margin-left: 30px;
    }