2 Kasterln übereinander - IE/Opera
Viennamade
- css
0 MudGuard
Hallo Forum!
Ich möchte 2 Boxen übereinanderlegen. Die untere (zindex=1) soll mittels einem absolut positionierten div-Element, die obere (zindex=100) mit einem Verweis-Element ausgezeichnet werden. Mein Versuch (s.u.) funktioniert im IE6.1 - dort liegen die Boxen exakt übereinander -, aber nicht im Opera 7.21 - da ist die durchs Verweis-Element gezeichnete Box viel kleiner.
Meine CSS-Datei sieht so aus:
#sitmap div.menuBar {
position:absolute;
top:0px;
left:0px;
width:400px;
height:400px;
}
#sitmap div.menuBar a.mnuBtn1 {
border: 2px solid red;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
position: relative;
z-index: 100;
}
div.btn_bg { position:absolute; z-index:1; border:1px solid; background-color:#FFFFFF; }
#mapf_hal { top:130px; left:40px; width:112px; height:37px; }
#mapb_hal { top:1px; left:0px; width:112px; height:37px; }
Meine html-Datei sieht so aus:
<div id="sitmap">
<div class="menuBar">
<div id="mapf_hal" class="btn_bg"><a id="mapb_hal" class="mnuBtn1" href="fieber.html" target="Seite">Fieber</a></div>
</div>
</div>
Ich hoffe, daß dies für jemanden von Euch ein "Klaks" ist, für mich ist es keiner.
Danke
Viennamade
Hi,
#mapb_hal { top:1px; left:0px; width:112px; height:37px; }
#mapb_hal selektiert ein a-Element.
a ist ein non-replaced inline-Element.
width und height treffen auf non-replaced inline Elemente nicht zu (der IE hat da einen Bug und interpretiert die Werte trotzdem).
Setze die display-Eigenschaft für das a-Element auf einen geeigneten Wert.
Wozu dient das div #mapf_hal?
Warum positionierst Du nicht direkt das a-Element?
cu,
Andreas