li Element mit Bild

[Furien]

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

 

[Maxi]

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

 

[prm]

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

 

[Furien]

Also ungefähr so:

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

 

[prm]

So sollte es klappen!

 

[Furien]

Kann ich dem ul auch noch eine ID zuweisen,
so das nicht alle uls so formatiert sind, sondern nur die, wo ich zum Beispiel
<ul id="1"></ul>

hinschreibe?

 

[Maxi]

Kann ich dem ul auch noch eine ID zuweisen,
so das nicht alle uls so formatiert sind, sondern nur die, wo ich zum Beispiel
<ul id="1"></ul>

hinschreibe?

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

 

[Furien]

Naja,
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.

 

[Maxi]

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.

 

[Furien]

Wenn ja, wie weist man eine zu?

Siehe Oben .
Natürlich in CSS.

 

[prm]

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

<ul class="listimg">
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ul>

 

[Maxi]

Siehe Oben .
Natürlich in CSS.

genau so wie IDs auch. Nur statt der # nimmst du in der CSS-Datei einen . und schreibst <ul class="">




// zu langsam :-(

 

[Furien]

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

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

 

[prm]

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;
}