inline <li> mit Hintergrundbild

[majo]

Hallo zusammen,

ich stehe vor folgendem Problem: In einer horizontalen Navigation möchte ich jedem <li> Element ein Hintergrundbild zuweisen (ein Holzschild). Leider klappt dass nicht so ganz, habs bisher folgenderdamßen versucht:

#navigation li {
 padding-left: 20px;
 display: inline;
 background-image: url(../images/schild.png);
 width: 150px;
 height: 150px;
}

Kann man einem inline Element überhaupt height/width zuweisen? Meine nämlich mal gelesen zu haben, dass dies nicht geht..wie aber bekomm ich dann mein Hintergrundbild dahin?

LG

 

[_Thor_]

Da hast du richtig gehört, einem Inline-Element kann man keine Höhe und Breite geben. Die Lösung heißt in dem Fall float.

Eine Hintergrundgrafik wird aber auch bei Inline-Elementen angezeigt, sobald sie über Inhalt verfügen. Ohne Inhalt wird natürlich auch kein Hintergrundbild angezeigt. Ein Element ohne Inhalt macht ja auch keinen Sinn.

 

[Asterixus]

Lass es als block und gib ihm float:left

Falls dir Abwärtskompatibilität egal ist, kannst du auch display:inline-block; benutzen.

 

[majo]

okay, hätte mir auch selber einfallen können. Vielen Dank!