Autor |
Nachricht |
Groooveman
Threadersteller
Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 18.03.2008 18:54
Titel CSS - Navigationen untereinander (z-index) |
|
|
Hallo und ich bin am Ende,
das Problem ist, das mein Drop Down Menü (oben rechts "Land 1", wird bei hover grün) hinter meinem Hauptmenü (darunter in orange links in blau) im IE 6 & 7 verschwindet. Im FF funkt alles...
Kann mir jemand helfen?
Gruss
G
###################################################
<body>
<div id="top">
<div id="choosecountry">
<a href="#" title="Land 1">Land 1</a>
<ul>
<li><a href="#" title="Land 1">Land 1</a></li>
<li><a href="#" title="Land 2">Land 2</a></li>
<li><a href="#" title="Land 3">Land 3</a></li>
</ul>
</div>
<ul>
<li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
</ul>
<div id="mainmenu">
<ul>
<li id="menu1">
<a href="#" title="Seite A"><span>Seite A</span></a>
<ul id="submenu1">
<li><a href="#" title="DUMMY">Seite 1</a></li>
<li><a href="#" title="DUMMY">Seite 2</a></li>
<li><a href="#" title="DUMMY">Seite 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
###################################################
#top {
float:left;
width:512px;
height:114px;
}
#topmenu {
width:512px;
height:76px;
}
#topmenu ul {
float:right;
}
#topmenu li {
float:left;
}
#choosecountry {
position:relative;
float:right;
width:114px;
}
#choosecountry ul {
position:absolute;
top:33px;
left:-5px;
width:120px;
height:0;
visibility:hidden;
z-index:3;
background-color:green;
}
#choosecountry:hover ul {
visibility:visible;
height:auto;
}
#choosecountry ul li a, #choosecountry ul li a:link, #choosecountry ul li a:visited, #choosecountry ul li a:active { width:120px; display:block; }
#mainmenu {
height:38px;
background-color:blue;
}
#mainmenu ul { border:1px solid yellow; }
#mainmenu ul li {
position:relative;
float:right;
list-style-type:none;
border:1px solid red;
z-index:1;
}
#mainmenu a, #mainmenu a:link, #mainmenu a:active, #mainmenu a:visited, #mainmenu a:hover { display:block; }
#mainmenu span { display:none; }
#mainmenu ul li ul {
position:absolute;
top:38px;
left:0;
width:146px;
height:0;
visibility:hidden;
}
#menu1:hover #submenu1 { width:120px; height:auto; visibility:visible; }
#mainmenu ul li ul li a, #mainmenu ul li ul li a:link, #mainmenu ul li ul li a:active, #mainmenu ul li ul li a:visited {
background:none;
width:146px;
height:auto;
}
#menu1 a, #menu1 a:link, #menu1 a:active, #menu1 a:visited { height:38px; width:86px; display:block; background-color:orange; }
#menu1 a:hover { display:block; background-color:orange; }
|
|
|
|
|
intelli
Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht:
|
Verfasst Di 18.03.2008 19:31
Titel
|
|
|
Poste mal lieber den Link, da bei dem Quelltext und dem CSS das Ganze auch in FF falsch / schlecht dargestellt wird. Alleine der Abstand von choosecountry Code: | #choosecountry ul {
position:absolute;
top:33px;
left:-5px;
width:120px;
height:0;
visibility:hidden;
z-index:3;
background-color:green;
} | its mit 33 px schon zu weit weg, so dass es zwar bei mouseover auftaucht aber man nie schnell genug drn kommt und es wieder verschwindet.
|
|
|
|
|
Anzeige
|
|
|
Groooveman
Threadersteller
Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 19.03.2008 09:58
Titel
|
|
|
Danke. Es gibt leider noch keine Seite zum zeigen - alles im Aufbau.
Sorry, den Abstand hab ich übersehen bei rauskopieren fürs Forum, soll natürlich nicht so sein und genau deshalb wird es auch so schlecht dargestellt. Das ist nicht das fertige Layout
Aber das Problem bleibt leider (in IE 6 & 7): Die eingeblendete "Hover Ebene" (grün) verschwindet hinter der orangen Navigations Ebene. Warum bloss???
|
|
|
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 19.03.2008 10:03
Titel
|
|
|
Ja kacke. Im IE kann afraik jedes non-static Element einen z-index kriegen. Somit solltest du auch den (auf den ersten Blick gesehen, muss nicht unbedingt stimmen) relativen Elterncontainer mit nem z-index belegen. Je nach Komplexität des Menus bzw. der Überlappungen musst du im Zweifel dem gerade aktiven Element dynamisch (per JS oder so) den höchsten z-index verpassen. Das kann man aber oftmals wieder durch geschickte HTML-Strukturierung und CSS-Tuning vermeiden.
|
|
|
|
|
Groooveman
Threadersteller
Dabei seit: 18.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 19.03.2008 10:31
Titel
|
|
|
Yipieehhh!
Es funktioniert mit #choosecountry {z-index:3;}.
Der Trink war eben genau jenem relativ positionierten Eltern-Element (#choosecountry) einen z-index zu geben!
10.000 Dank
G
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] suche ungewöhliche Navigationen auf CSS-Basis
[php] Klassen untereinander verwenden
[CSS] Boxen untereinander floaten
PDFs untereinander verlinken
Höhenvariable Frames passend untereinander?
CSS-float 2 buttons untereinander stellen!
|
|