[CSS, HTML] Abstand zwischen Listeninhalt und list-style-image

[wahnsinn]

Ich habe eine ul, deren Optik ich ein bisschen angepasst habe. Der langweilige Punkt ist jetzt ein hübscher farbiger Pfeil.

ul {
	list-style-image: url(../pic/basic/li.png);
}

Ich hätte allerdings den Abstand zwischen dem Pfeil und dem Listeninhalt ein bisschen kleiner. Habe ich darauf irgendwie direkten Einfluss oder muss ich da irgendwas tricksen?

 

[theHacker]

Du kannst den Text einfach verschieben:

ul li {
  position: relative;
  left: -2px;
}

(afair). Ich glaub, mit margin gehts ned, weil du da das Bullet mitverschiebst.

Probiers einfach mal aus. Es geht zumindest irgendwie

 

[Samy]

ansonsten musst du mit background-position das bild näher an text rücken, und dann mit margin das ganze wieder zurück....

 

[wahnsinn]

Das mit der relativen Position klappt nicht. Da verschiebt's den ganzen Listeneintrag.

Das mit dem Hintergrund werd ich morgen früh mal probieren. Ist das wirklich mit background-position ansprechbar? Und kann ich da wirklich pixelgenau rumschieben?

 

[paddya]

ansonsten musst du mit background-position das bild näher an text rücken, und dann mit margin das ganze wieder zurück....

Das List-Style-Image hat aber nichts mit dem Background-Image zu tun . Sollte also (so) nicht funktionieren. Man müsste dann wirklich mit einem Hintergrundbild arbeiten.

 

[Samy]

Stimmt ich habs als background-image bei meiner Liste definert.
Aber ansonsten gibst du den links nen background-image und postitionerts es so.

 

[wahnsinn]

Ich hatte folgende Idee:

<ul>
	<li><span>bla1</span></li>
	<li><span>bla2</span></li>
</ul>

li > span {
	position: relative;
	left: -5px;
}

Das hat dann optisch auch nach dem ausgeschaut, was ich mir vorgestellt hatte. Allerdings gab's da irgend so 'nen doofen IE7-Bug, der mir dann aus irgend einem Grund beim Aufruf meines DHTML-Layer-Menüs alles weg gezaubert hat.
Weil ich zu faul war, den genauen Fehler zu suchen, hab ich's jetzt auch list-style:none; eingetragen und steuer's über die Hintergrundgrafik. Ist zwar nicht im Sinne des Erfinders - aber bei CSS muss man ja mal öfters Kompromisse eingehen.

Vielen Dank, Problem ist gelöst.

 

[Dreamworker]

von wegen sinne des erfinders, dann hätte dieser list-style-position mehr eigenschaften geben sollen.

also ist das mit background schon korrekt so.

 

[PlaciD]

Hi,

es sollte reichen, den li-Elementen margin-left und padding-left zu nehmen (0px): Dann sitzen sie direkt über dem list-style-image. Und dann halt padding entsprechend erhöhen, bis es passt.

PlaciD