List navigation mit Background Image

[UnoDosTres]

Hi,

ich habe eine Dynamische Navigation die mit Hilfe einer Liste ausgegeben wird.
Jetzt habe ich quaisi jedem List-Element eine Hintergrundgrafik gegeben.
Ich möchte jetzt nur noch die Schrift etwas weiter nach rechts rücken.

Aber egal wie ich es mache. Ich bekomme es nicht hin. Immer wird der ganze Block (mit backgroundgrafik) verschoben.

#sidebar {
padding-left: 10px;
}

#sidebar li{
	list-style: none;
	background-image: url(grafics/button.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 10px;
	height: 35px;
	width: 134px;
	display:block;
	
	}

 

[Maik]

Hi,

hast du schon mal im Selektor #sidebar li den padding-left-Wert erhöht?

Mit dieser Eigenschaft lässt sich der Elementinhalt nach rechts einrücken, ohne dass das Hintergrundbild verschoben wird.

 

[UnoDosTres]

Ja klar. Leider verschiebt sich immer das ganze element.

 

[Maik]

Ich weiß nicht, welches Element du jetzt meinst, aber ich häng dir mal meinen Testcode incl. einer Hintergrundgrafik als ZIP-Datei an, bei dem nur das im li enthaltende a-Element nach rechts eingerückt wird. Den padding-left-Wert habe ich hier zu Demonstrationszwecken auf 100px gesetzt.

Getestet im Firefox 2.0.0.4, IE6, Mozilla 1.7.12, Netscape 7.0, Opera 9.10 & SeaMonkey 1.0.5

Anmerkung: Gemäß dem Boxmodell beträgt die Boxbreite für das li-Element nach deinen CSS-Angaben 144px (width:134px + padding-left:10px = 144px). Wenn du den padding-left-Wert erhöhst, muss diese Werterhöhung von der Breitenangabe subtrahiert werden, um wieder auf die 144px zu kommen.