nicht angemeldet
hallo!
ich habe mich durch das forum mit der suchfunktion gehangelt und auch schon das web durchsucht und in einem anderen forum diese frage gestellt, aber bisher konnte mir noch keiner bei meinem problem helfen.
folgendes problem:
ich möchte eine navigation bauen, die aus übereinander lappenden elementen bestetht. diese sind per z-index über einander gelegt.
ein element besteht aus 2 bildern. eins für den normal-zustand und eins für den hover-zustand. dazu kommt noch ein text der den beschreibt um was es geht wenn man auf den link geklickt hat.
nun nimmt das problem seinen lauf.
ich habe bisher 2 möglichkeiten getestet und keine von beiden unter dem IE 6/7 zum laufen bekommen.
firefox, opera, safari (beta für windows) hat alles geklappt nur der IE6/7 nicht.
folgendes:
man soll sowohl auf das bild als auch auf den text mit der maus fahren können, damit der hover-status aktiviert wird.
beim "hovern" soll sich das bild ändern und der text auch. der text soll aber NICHT im bild integriert sein, da SUMAs das sonst nicht lesen können.
ich hab das so gelöst:
<a class="test123" href="index2.html">
<ul id="box_startseite">
<li class="spacer"><h2>
<ahref="index2.html"> Startseite</a></h2></li>
</ul>
</a>
und hier der css-code:
#box_startseite{
position: absolute;
display:block;
width: 152px;
height: 153px;
margin-top: 50px;
z-index: 0;
background-color: transparent;
}
.test123{
}
.spacer{
padding-top: 133px;
padding-left: 0px;
list-style-type: none;
}
.spacer h2{
font-size: 17px;
text-decoration: none;
}
.spacer a {
border: 0px solid black;
padding-top: 133px;
padding-right: 60px;
padding-bottom:2px;
padding-left:0px;
background-image:url(../images/navi/startseite_normal.gif);
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
color: #0c5259;
text-decoration: none;
}
.spacer a:hover {
color: black;
border: 0px solid black;
padding-top: 133px;
padding-right: 60px;
padding-left:0px;
background-image: url(../images/navi/startseite_hover.gif);
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
color: #0c5259;
text-decoration:none;
}
#box_startseite:hover{
position: absolute;
z-index: 100;
}
der IE erkennt zwar den hover-zustand und wechselt das bild dementsprechend, aber er überlappt das aktive element nicht.
das heißt der z-index im hover element ist ihm absolut wurst
und einen <a href>-tag um ein div-element geht nicht (da z-index nur für block-elemente wie divs gedacht ist und <ul> ist ja keins), das hab ich als erstes ausprobiert.
deswegen bin ich auf diese sehr "kreative" lösung gekommen. die wie gesagt im FF, Opera und Safari(beta) wunderbar funktioniert.
ich hoffe mein problem ist klar geworden und mir kann geholfen werden. :)
mfg