nicht angemeldet
IE: Linkleisten überlappen sich
Hallo,
Ich habe zwei Navigationsleisten erstellt, die ihr euch unter
http://autterenautnihil.de.server184-han.de-nserver.de/projects/settour/bsp.htm
ansehen könnt. Der Firefox stellt diese korrekt dar, während der IE 6 die Popups der Blauen Leiste durch die braune Leiste verdeckt. Hier ist der relevante HTML Code:
<!-- erster Nav, blau -->
<div class="anav">
<ul id="anav">
<li> Adminnav:</li>
<li><a href="#">Catalogues</a><br />
<ul class="adrop"><li class="w125">
<a href="/settour/main.php?site=catalog&mod=admin">Standard</a><br />
<a href="/settour/main.php?site=catalog&mod=admin&tnr=l">Livingstone</a><br />
</li></ul>
</li>
<li><a href="/settour/lastminute/?mod=admin">Last Minute</a></li>
<li><a href="/settour/letenky/?mod=admin">Flights</a></li>
<li><a href="#">Text Documents</a><br />
<ul class="adrop"><li class="w125">
<a href="/settour/main.php?site=textdoc&mod=admin">Manage Docs</a><br />
<a href="/settour/cestopis/?mod=admin">Travelogs</a><br />
</li></ul>
</li>
<li><a href="/settour/main.php?site=stat&mod=admin">User statistics</a></li>
</ul>
</div>
<!-- zweite Nav, braun -->
<div class="nav">
<ul id="nav">
<li> </li>
<li><a href="/settour/main.php">Home</a></li>
<li><a href="#">Informácie</a><br />
<ul class="drop"><li class="w125">
<a href="/settour/main.php?site=about">O nás</a><br />
<a href="/settour/main.php?site=contact">Kontakt</a><br />
</li></ul>
</li>
<li><a href="#">Katalógy</a><br />
<ul class="drop"><li class="w125">
<a href="/settour/main.php?site=catalog">Standard</a><br />
<a href="/settour/main.php?site=catalog&tnr=l">Livingstone</a><br />
</li></ul>
</li>
<li><a href="/settour/lastminute/">Last Minute</a></li>
<li><a href="/settour/letenky/">Letenky</a></li>
<li><a href="/settour/cestopis/">Cestopisy</a></li>
</ul>
</div>
Hier die css:
/* Navigation */
.nav { margin:0 0 15px 0; float:left; width:100%; height:20px; font-family:Arial; border-right:2px solid #D5090C;
border-bottom:2px solid #D5090C; z-index: 10}
#nav { height:20px; line-height:20px; float:left; width:100%; background:#CEC4AB; color:#000000; font-weight:bold;
text-decoration:none; margin:0; padding:0px 4px 0 4px; }
#nav ul, ul#nav { margin:0; padding:0; list-style:none; }
ul#nav { }
#nav li { float:left; position:relative; background:#CEC4AB; color:#000000; border-right:1px solid #09356B;}
#nav li ul { display:none; position:absolute; top:0; left:0; }
#nav li>ul { top:auto; left:auto; }
#nav li:hover ul, #nav li.on ul { display:block; z-index: 556}
#nav a { display:block; height:20px; line-height:20px; float:left; color:#000000; font-weight:bold;
text-decoration:none; margin:0; padding:0 4px 0 4px; }
#nav a:hover { color:#FFF; background:#D5090C; display:block; }
.drop { margin: 0; padding: 0; }
.drop li { position:absolute; display:block; white-space:nowrap; overflow:hidden; top:20px; margin:0; padding:5px;
background:#000; text-align:left; border-bottom:1px solid #09356B; z-index: 555 }
.drop>li { top: 0px; }
.drop a { width: 100%; }
.w125 { width: 125px; }
.w150 { width: 150px; }
.w175 { width: 175px; }
/* Admin-Navigation */
.anav { margin:0; float:left; width:100%; height:20px; font-family:Arial; border:1px solid #000000; z-index:600 }
#anav { height:20px; line-height:20px; float:left; width:100%; background:#09356B; color:#FFF; font-weight:bold;
text-decoration:none; margin:0; padding:0px 4px 0 4px; }
#anav ul, ul#anav { margin:0; padding:0; list-style:none; }
ul#anav { }
#anav li { float:left; position:relative; background:#09356B; color:#FFF; border-right:1px solid #09356B; }
#anav li ul { display:none; position:absolute; top:0; left:0; }
#anav li>ul { top:auto; left:auto; }
#anav li:hover ul, #anav li.on ul { display:block; z-index:620 }
#anav a { display:block; height:20px; line-height:20px; float:left; color:#FFF; font-weight:bold;
text-decoration:none; margin:0; padding:0 4px 0 4px; }
#anav a:hover { color:#FFF; background:#D5090C; display:block; }
.adrop { margin:0; padding:0; }
.adrop li { position:absolute; display:block; white-space:nowrap; overflow:hidden; top:20px; margin:0; padding:5px;
background:#000; text-align:left; border-bottom:1px solid #09356B; z-index:630 }
.adrop>li { top:0px; }
.adrop a { width:100%; }
Könnt ihr mir sagen, wie ich die Popups der blauen Leiste über die braune leiste stelle? Ich habe alle möglichen Anordnungen von z-index versucht, und bis jetzt hats nicht geklappt.
Danke und Gruss,
caspar
-
Hallo,
Ich habe zwei Navigationsleisten erstellt, die ihr euch unter
http://autterenautnihil.de.server184-han.de-nserver.de/projects/settour/bsp.htm
ansehen könnt. Der Firefox stellt diese korrekt dar, während der IE 6 die Popups der Blauen Leiste durch die braune Leiste verdeckt. Hier ist der relevante HTML Code:/* Navigation */
#nav li { float:left; position:relative; background:#CEC4AB; color:#000000; border-right:1px solid #09356B;}
Die LI-Elemente in UL#nav sind relativ positioniert.
#nav li ul { display:none; position:absolute; top:0; left:0; }
Die UL-Elemente in LI-Elementen der UL#nav sind absolut positioniert. Ihre Position _und_ ihr z-Index sind somit abhängig von der Position und den z-Index der LI-Elemente in UL#nav.
/* Admin-Navigation */
#anav li { float:left; position:relative; background:#09356B; color:#FFF; border-right:1px solid #09356B; }
Die LI-Elemente in UL#anav sind relativ positioniert.
#anav li ul { display:none; position:absolute; top:0; left:0; }
Die UL-Elemente in LI-Elementen der UL#anav sind absolut positioniert. Ihre Position _und_ ihr z-Index sind somit abhängig von der Position und den z-Index der LI-Elemente in UL#anav.
Wenn nun #nav im Dokument nach #anav steht, dann überdeckt #nav LI die #anav LI, wenn beide den selben z-Index haben. Somit überdeckt #nav LI auch das, was innerhalb von #anav LI steht, egal welchen z-Index das auch hat.
Könnt ihr mir sagen, wie ich die Popups der blauen Leiste über die braune leiste stelle? Ich habe alle möglichen Anordnungen von z-index versucht, und bis jetzt hats nicht geklappt.
Ja, an der falschen Stelle. Setze z-Index von #anav LI größer als z-Index von #nav LI. Die z-Index-Werte von #anav LI UL oder #nav LI UL spielen hier keine Rolle mehr.
viele Grüße
Axel