✔ ul Listen Image

[son gohan]

Hallo,

ich habe eine Liste mit Pfeilen in Form von Bildern programmiert mit CSS so:

<ul style="list-style-image: url(bilder/pfeil.jpg);margin:0 0 0 27px;padding:0;">

Die Pfeile sind aber nicht so gut an den Text fixiert, die Pfeilspitze zeigt auf den Boden der Buchstaben, sollten aber so ca. in die mitte reichen.

Problem könnte man lösen wenn ich die Pfeile etwas justieren könnte mit Css geht sowas?

 

[Maik]

Die Bullet-Grafik lässt sich nicht mit CSS "nachjustieren" bzw. zurechtpositionieren.

Verwende die Grafik stattdessen als Hintergrundbild für die Listenpunkte, dann kannst du sie mit background-position wie gewünscht ausrichten.

 

[son gohan]

Hi,
das klapt leider nicht, ich hab es jetzt so gemacht wenn ich dich richtig verstanden habe:

<li style="background-image: url(bilder/pfeil.jpg);background-repeat:no-repeat;background-position:-10px;">text.</li>

Das klapt aber auch nicht, ich habe ein Bild unten wo man sehen kann wie es zur Zeit aussieht.

das obere ist so wie ich es jetzt beshrieben habe mit dem CSS beim unteren habe ich mal ein Rahmen an das LI Tag hinzugefügt um zu sehen wie der Text da liegt.

 

[Maik]

Probier es mal mit diesem Stylesheet:

ul {
list-style: none;
}

li {
background: url(bilder/pfeil.jpg) no-repeat left center;
padding-left: 10px;
}

 

[son gohan]

Das hilft leider auch nicht, das Pfeilbild ist immer hinter dem Text, sollte aber weiter links stehen.

 

[Maik]

Dann erhöhe einfach entsprechend der Grafikbreite den Wert für padding-left

 

[son gohan]

Ja so klapt es.

Aber wie bekomme ich jetzt den Pfeil noch nach oben wenn ich mal mehr Text stehen habe?

 

[Maik]

background: url(bilder/pfeil.jpg) no-repeat left top;

 

[son gohan]

Klasse, danke.