CSS et liste déroulante superpositionFermé

Question

bonjour à tous !
Voilà : j'ai repris le code source d'un menu horizontal a 2 niveaux réalisé en CSS ( http://dosimple.ch/articles/Menus-dynamiques/menuHorizontal.html)
J'ai donc mon menu horizontal sur une hauteur de 20px, et en dessous un div qui affiche mes pages par include.
Le probleme c'est à l'affichage des sous menus : pour s'afficher, ils prennent facilement plus de 20px de hauteur, donc ils s'affichent par dessus mes pages. Mais lorsque sur cette page j'ai une liste déroulante, les sous menu sont cachés par celle ci!
En résumé, le menu s'affiche bien au dessus de la page mais en dessous de la liste deroulante!
Quelqu'un a une soluce ou une piste svp?

grofwa · Answer

Salut,

Regarde dans les attributs "style", au niveau des DIV, il y a les arguments "z-order" qui indiquent quand deux éléments se trouvent l'un sur l'autre lequel est "dessiné" en premier.

Je dis pas que c'est la solution, mais ça me semble être une bonne piste.

Bon courage

Michael.

Ne vous souciez pas de n'être pas remarqué ; cherchez
plutôt à faire quelque chose de remarquable [Confucius]

kik0une · Answer

Merci pour ta reponse, mais j'ai deja essayé de mettre des z-index sur les sous menus et sous-sous menus mais rien n'y fait, je vais continuer a chercher (je suis dessu depuis 14h...) mais si quelqu'un a une idée je suis preneur!! sioupléééééééé!! lol

Eucaryote · Answer

Salut à tous

Je remet ce sujet au goût du jour puisque j'ai exactement le même problème mais aucune solution n'a été donné!

J'avais essayé de mettre des "z-index" et je n'ai obtenu aucun résultat. Je connaissais pas "z-order"...ça existe? En tout cas, cela ne semble pas m'aider davantage dans mon problème!

Merci pour vos réponses

txiki · Answer

Salut a tous,
D'abord sous quel navigateur est-vous ? IE ? FIrefox ? Le Pb est-il le même pour les deux ?
Ensuite, je constate un souci dans le CSS extrait ci-dessous:

/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }

Faudrait virer le *html (je pense que c'est une erreur (

/* ici c'est pour mettre des commentaires */

)
donc ecrire:

.menu li li {

........

J'ai pas essaye mais faut voir....
Bon courage !

Eucaryote · Answer

Merci pour ta réponse txiki

Je rencontre ce problème aussi bien sur IE que sur Firefox (je teste tout le temps les deux pour que mon site convienne à tous).
Oui le "* html" est une erreur que j'ai corrigé mais ça ne résoud en rien le problème!
J'ai donc essayé de mettre des "z-index" et des "z-order" de partout et rien ne marche...

D'autres propositions? ^_^

txiki · Answer

Tu peux mettre le lien de ton site ici, et si possible, le css qui va avec ?

Va voir mon site sur Jean Chalvidant: http://www.chalvidant.com/ le menu, je crois est comme tu veux.

Vois ce qu'il en ait chez toi et fais moi signe.

vieillehiboux · Answer

Hello,

J'utilise le menu déroulant dynamique a plusieurs niveaux de do-simple sur mon site. Il fonctionne sur tous les navigateurs mais y l'a un serieux bug avec firefox. Le menu dégrade la partie de la page contenant le menu(potentiel). Un exemple sur ma galerie en construction ici.
Il suffit de cliquer sur l'image pour ce rendre compte de ce bug:
http://l.cb.vu/galerie/arbaz_pano/
Le java est celui de dosimple le css est modifié, mais jâis le même problème avec le css d'origine. voici mon css corespondant au menu:
.menu1 {
float : left;
position : fixed;
top : 1em;
left : 1.5em;
bottom : 1em;
right : auto;
background : black;
width : 160px;
width : 160px;
margin : 0;
padding : 0;
}
.menu {
position:absolute;

/*float : left;
position : fixed;
top : 1em;
left : 1.5em;
bottom : 1em;
right : auto;
background : transparent;*/
width : 160px;
width : 160px;
margin : 0;
padding : 0;
}
.menu ul {
margin : 0;
padding : 0;
position : absolute;
width : 168px;
width : 168px;
}
.menu li ul {
visibility : hidden;
}
.menu li ul {
margin-left : 168px;
margin-top : -35px;
}
.menu a {
text-align : left;
background : url(../im/li.png);
/*background-color :black;*/
color : #a32f00;
/*font-size : medium;*/
/*font-style : italic;*/
display : block;
width : 168px;
border-bottom : 3px solid #212121;
border-top : 3px solid #212121;
border-right : 3px solid #212121;
text-decoration : none;
margin-left : 0;
padding : 8px 0 8px 0;
}
.menu a:hover {
background : url(../im/li2.png);
/*background :black;*/
color : silver;
}
.menu a:focus {
background : url(../im/li2.png);
color : silver;
}
.menu span {
display : none;
}
.menu li {
width : 168px;
display : block;
float : left;
list-style : none;
margin-left : -0.85em;
margin-top : 7px;
margin-bottom : 7px;
padding-top : 7px;
padding-bottom : 7px;
}
.menu .sousMenu {
background : url(../im/li.png);
margin-left : 9px;
margin-top : 0.25em;
margin-bottom : 0;
padding : 0;
}
.menu .sousMenu2 {
background :url(../im/li.png);
margin-left : 4px;
margin-top : 0.25em;
margin-bottom : 0;
padding : 0;
}
.menu:before {
content : "Galerie";
display : block;
background : black;
border-bottom : 1px solid #a32f00;
margin-bottom : 0.5em;
padding : 0.1em 0.25em;
font-size : medium;
font-style : italic;
color : #a32f00;
}

* html .menu li {
display : inline;
float : none;
}
a.linkOver {
background : url(../im/li2.png);
color : silver;
}

anis · Answer

Bonjour;
j'ai créé une liste déroulante de type JComboBox et juste au dessous, j'ai créé des zonnes de texte de type TextField.
quand j'ouvre la liste déroulante, elle sera cachéé par les zonnes de texte.(JAVA)
pouvez vous m'aider?
merci d'avance ;)

CSS et liste déroulante > superposition

8 réponses

Discussions similaires

Newsletters