CSS et liste déroulante > superposition
kik0une
-
anis -
anis -
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?
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?
A voir également:
- CSS et liste déroulante > superposition
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste déroulante google sheet - Accueil - Guide bureautique
- Liste code ascii - Guide
- Site dangereux liste - Guide
8 réponses
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]
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]
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
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
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
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:
Faudrait virer le *html (je pense que c'est une erreur (
donc ecrire:
J'ai pas essaye mais faut voir....
Bon courage !
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 !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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? ^_^
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? ^_^
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;
}
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;
}
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 ;)
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 ;)