✔ Navbox über Bild positionieren

[Kahmoon]

Hellau beisammen,

ich muss einen Newswechsler bauen bei dem in einem div Grafiken liegen die später Links zu den entsprechenden News erhalten. Über dem Div mit den Grafiken soll stehts die Navi (Switch) sichtbar sein (siehe Anhang).

Folgenden Code habe ich bisher:

<style type="text/css">
#switch{
    z-index:10;
    position:relative;
    top:10px;
    left:240px;
    width:70px;    
}
</style>


<div id="switch">
    <img src="button_1.gif" />
    <img src="button_2.gif" />
    <img src="button_3.gif" />
</div>

<div style="float:left; width:320px;">
    <div style="display:block;"><img src="aufmacher1.jpg" /></div>
    <div style="display:none;"><img src="aufmacher2.jpg" /></div>
    <div style="display:none;"><img src="aufmacher3.jpg" /></div>
</div>

Er legt auf diesem Wege zwar die Grafiken drüber.....aber er verschiebt das Bild auch eine Zeile nach unten da er sich eien volle Zeile Platz für das div "switch" nimmt. Man könnte jetzt dem "switch" eine Höhe von 1px geben....das klappt aber wieder im IE 6 nicht.

Vermutlich gibt es einen viel eleganteren Weg und ich komme nicht drauf....

Kann mir wer weiterhelfen?

Gruß
Franky

 

[Maik]

Hi,

verstehe ich das jetzt richtig, dass das DIV #switch über das nachfolgende Element "gelegt" werden soll?

 

[Kahmoon]

Sorry wenn ich mich unklar ausgedrückt habe. Ja das DIV Switch soll immer über dem Div mit den Grafiken liegen.

 

[Maik]

Alles klar

#switch{
    z-index:10;
    position:absolute;
    top:10px;
    left:240px;
    width:70px;
}

<div style="float:left; width:320px; position:relative;">
     <div id="switch">
          <img src="button_1.gif" />
          <img src="button_2.gif" />
          <img src="button_3.gif" />
     </div>
     <div style="display:block;"><img src="aufmacher1.jpg" /></div>
     <div style="display:none;"><img src="aufmacher2.jpg" /></div>
     <div style="display:none;"><img src="aufmacher3.jpg" /></div>
</div>

 

[Kahmoon]

Oh man....eigentlich logisch. Habe beim rumprobieren falsch verschachtelt.
Danke für die Hilfe.