28220 sujets

CSS et mise en forme, CSS3

Petit probleme menu deroulant et superposition

Bonjour,

j'ai un tout petit probleme avec la superposition des div( Smiley langue ) , j'ai un menu deroulant horizontal qui se déroule au survol, pour qu'il soit toujours visible j'ai mis z-index:100 pour être sur....... Mais apparement lorsque dans le div qui est juste en dessous je met un objet Flash, mon menu déroulant est caché et passe derriere cet objet (sous IE, Firefox et Netscape Smiley sweatdrop ).

voici la css:

.interface
{position:absolute;
left: 50%; 
width: 778px;
margin:0;
margin-left: -389px; /* moitié de la largeur */
padding:0;
background-color:#FFFFFF;
border:1px solid #000000;
}
.menu{
position:absolute;
width:778px;
height:91px;
margin:0;
padding:0;
left:0;
top:0;
z-index:200;
background-color:#FFFFFF;
}
.divCentre{
position:absolute;
width:778px;
height:400px;
margin:0;
left:0;
top:91px;
border:0;
overflow:auto;
background-color:#FFFFFF;
}


Si quelqu'un à une petite idée........Merci d'avance
Modifié par nata (27 May 2005 - 08:21)
Bonjour,

Sans parler de c...
J'ai un pb similaire: J'ai repris le menu déroulant de http://www.ibilab.net/webdev/articles/CSS/creer-menus-cascade-simple-4.htm
que je trouve particulièrement élégant mais je n'arrive pas à le faire marcher quand les sous-menus survolent un <div> différent de celui du menu principal.

Vous pouvez voir un exemple à la page http://www.webologix.com/e-boutique/catalogue.php
Une fois sur deux on ne peut pas atteindre les sous-menus (sous firefox). Si on recharge la page ça remarche (ou ça ne marche plus si ça marchait).

le code de menuDeroulant.css:

/* CSS Menu Deroulant */
ul#menu li ul { display:none; }

ul#menu li:hover>ul { display:block; }

ul#menu { float:left; }

ul#menu,ul#menu ul{
text-align: center;
background:#000;
border:1px solid grey;
list-style:none;
margin:0px;
padding:0px;
width:148px;
_width:150px;
}
ul#menu ul{
border:1px solid grey;
background:#000;
position:absolute;
top:-1px;
left:148px;
padding:0px;
z-index:100;
}
ul#menu li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menu a{
display:block;
width:100%;
color:#a00;
text-decoration:none;
font-weight: bold;
}
ul#menu a:hover{
color:#f00;
background: #563a08;
}

le code css des deux <div> en cause:

.frame {
position: absolute; margin-left:150px; top:100px;
padding: 10px;
width: 630px;
height: 400px;
overflow: auto;
z-index: 1;
background: #563a08;
}
.frameLarge {
padding:0px;
width: 800px;
height: 400px;
overflow: auto;
background: #563a08;
/*background:url(../images/fondTrame.gif) ;*/
}
merci pour toute aide
Smiley langue
Modifié par kmchen (27 May 2005 - 18:53)
Sujet clos
Aller à