✔ Abstand Listengrafiken - Listentext

[Nexlamar]

Hi!

Nur eine kurze Frage: Wie verringere ich den Abstand zwischen Listengrafik (Bulletpoint) und dem Listentext im li-Tag.

Also z.B. von

- Liste nach - Liste

Verringere ich im li-Tag z.B. margin oder padding ins negative, tut sich auch nichts...

#product ul
{
list-style-image:url(../images/products/list.gif); 
padding-left:12px !important;  
margin-left:0px !important;  
margin-left:4px; 
margin-top:3px;
line-height:13px;
}

#product li
{
margin-bottom:4px;
}

Vielen Dank!

 

[Maik]

Verwende anstelle der Bulletgrafik (list-style-image) eine Hintergrundgrafik (background) für die Listenpunkte und bestimme mit padding-left den gewünschten Abstand zur Grafik:

#product ul {
list-style-type: none;
}

#product ul li {
background: url([Grafik-URI]) no-repeat 0 50%;
padding-left: 10px;
}

 

[Nexlamar]

Das ist ein guter Tipp - ich teste das, danke!

 

[Gumbo]

Passe doch einfach die linkte Polsterung (padding-left) der Listenelemente an.

 

[Nexlamar]

Ich fürchte das wird nicht funktionieren, weil ich nicht die li-Elemente in Relation zum übergeordneten Element verändern möchte, sondern den Text der li-Elemente in Relation zur Bulletgrafik.

 

[Maik]

Deshalb auch mein Tipp mit der Hintergrundgrafik

 

[Gumbo]

Bei mir funktionierts einwandfrei:

ul {
	list-style-image: url(http://images.google.de/images?q=tbn:k_Kd3ixZgbCgxM:i2cam.org/images/li_bullet.gif);
}
ul li {
	padding-left: 1em;
}

 

[Maik]

@ Gumbo: Nexlamar möchte den Text näher an das Listenzeichen rücken, wie es die Browser in ihrer Voreinstellung darstellen bzw. padding-left:0 ermöglicht.

 

[Nexlamar]

Genau, nur padding-left:0 reicht eben nicht

 

[Nexlamar]

Das wars tatsächlich:

#product ul li {
background: url(../products/images/list.gif) no-repeat 0 3px;
padding-left: 10px;
}

Vielen Dank an Euch beide!

Nex