Ich habe einen praktischen Tipp in einem anderen Forum entdeckt:

>>>> Du brauchst kein JS, um beim Hovern 2 verschiedene Hintergrundbilder zu ändern:

Code:
<a href="#"><span>text</span></a>

Code:
a,
span {
display: block;
}

a:hover {
background: ...
}

a:hover span {
background: ...
}

Das läuft sogar im IE 5.0. <<<<<<<<<<

Nun ist es bei mir aber so, wenn ich das z.B. einbinde in

<ul id="subnav2">
<li><a href="xyz" ><span></span></a></li>
</ul>

<ul id="subnav3">
<li><a href="xyz2" ><span></span></a></li>
</ul>
..............

und in der style.css entsprechend z.B.

#subnav2 li a,span {

background: #FFFFFF url(images/xyz.gif);
width: 130px;
height: 30px;
display: block;
cursor: pointer;
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}


#subnav2 li a:hover span, #subnav2 li a:active span {
background: #FFFFFF url(images/xyz2.gif);
width: 130px;
height: 30px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

Dann kommt jede einzelne Box immer leicht nach unten versetzt (durch den ja leeren Text). Ich benötige immer eine neue <li> da jedes Bild eine andere Breite hat.

Wie kann ich erreichen dass alle Menüpunkte immer auf gleicher Höhe sind?

Danke!

Hi,

Zitat von berlin10999

Wie kann ich erreichen dass alle Menüpunkte immer auf gleicher Höhe sind?

erweiter das Stylesheet zu Beginn folgendermaßen:

Code css:

1 2 3 4 5 6 7

* { margin:0; padding:0; } #subnav2, #subnav3 { float:left; }

mfg Maik

P.S. In diesem Selektor dürfte das Komma deplatziert sein:

Code css:

1	#subnav2 li a,span  { ... }

wenn ich zum Vergleich diesen Selektor betrachte:

Code css:

1	#subnav2 li a:hover span, #subnav2 li a:active span { ... }

Klasse, funktioniert, thx!!