Hintergrundbild in Liste....

[Parallax]

Hallo, nachdem nun alles einigermaßen läuft habe ich ein kleines Problem....

meine navigation besteht aus einer liste mit dem schema

<ul>
<li><a href><img src/> </a></li>
...
...
</ul>

funktioniert so ganz gut und schaut auch prima aus....
allerdings möchte ich nun hinter den buttons noch einen weiteren hintergrund haben.... wenn ich in css die <ul> background-color ändere hab ich einen anderen hintergrund, jedoch wenn ich in ul ein background-image einfüge verschiebt es das image unter den letzen button....

was kann ich dagegen machen...??

mfg
Parallax

 

[ohrflieger]

Weise doch deinen Buttons direkt einen Hintergrund zu.

ul li a img {
 background-image: url("bild.jpg");
}

 

[Parallax]

hm wäre ja ganz ok.... leider schaut das bei mir etwas anders aus...

und zwar habe ich in etwa eine linke spalte auf der seite... in dieser reihen sich die nav-buttons auf.... und diese nav-buttons sollen auf einer gesamtgrafik befinden... sozusagen als hintergrund für die buttons..... allerdings wechselst das hintergrund bild langsam die farbe von weiß auf grün.... ergo kann ich keine einzelnen hintergrundbilder festlegen weil dann ja der farbverlauf net stimmt

mfg
Parallax

 

[threadi]

Ein img-Element a la

<img src />

ist schonmal völlig falsch. Das Attribut src braucht auch einen Wert.

Da Du Hintergrundbilder verwenden willst ist img das falsche Element an dieser Stelle. Um dein Ziel zu erreichen solltest Du folgendes machen:

<li><a href="#"><span>&nbsp;</span></a></li>

Dann kannst Du sowohl dem a- als auch dem span-Element ein Hintergrundbild zuweißen.

li a { background-image: url(bild1.jpg); }
li a span { background-image: url(bild2.jpg); }

Sollte es vom Design her problematisch aussehen hilft mitunter auch "display: block" um aus diesen beiden inline-Elementen Blockelemente zu machen. Erst dann nehmen sie die volle zur Verfügung stehende Breite ein (wohl gemerkt nicht die Höhe).