Pb css : z-index et calques
romain13
-
romain13 -
romain13 -
Bonjour,
Je suis en train de créer un site et j'ai un pb avec ma page css.
J'ai utilisé la propriété z-index pour mettre une image (en fait un cadre pour que ce soit plus joli) au dessus de plusieurs 'select' qui sont contenus dans un 'div'.
L'image est dans un 'div' et les 'select' sont dans un 'div', mais les 'div' sont successifs (c'est-à-dire non imbriqués). Le pb que j'ai est que je n'arrive plus à cliquer sur les 'select'.
Si qqun a une idée, qu'il n'hésite pas!
Voici la partie html :
et la partie css :
Je suis en train de créer un site et j'ai un pb avec ma page css.
J'ai utilisé la propriété z-index pour mettre une image (en fait un cadre pour que ce soit plus joli) au dessus de plusieurs 'select' qui sont contenus dans un 'div'.
L'image est dans un 'div' et les 'select' sont dans un 'div', mais les 'div' sont successifs (c'est-à-dire non imbriqués). Le pb que j'ai est que je n'arrive plus à cliquer sur les 'select'.
Si qqun a une idée, qu'il n'hésite pas!
Voici la partie html :
<div id = "cadre"> </div> <div id = "search"> <input id = "searchText" type="text" size="15" /> <input id = "searchBtn" type="button" value="Chercher" OnClick="actualise();" /> <br /> <select id = "genre" size="5" onchange= "actualise();"> <option value = "-1" selected> Tous </option> </select> <select id = "artiste" size="5" onchange= "actualise();"> <option value = "-1" selected> Tous </option> </select> <select id = "album" size="5" onchange= "actualise();"> <option value = "-1" selected> Tous </option> </select> <select id = "annee" size="5" onchange= "actualise();"> <option value = "-1" selected> Tous </option> </select> </div>
et la partie css :
#cadre { position: absolute; top: 42%; left: 20%; width: 60%; height: 24%; /*border: solid 1px red;*/ background: transparent url(../images/cadre.png) no-repeat; z-index: 3; } #searchText { position: absolute; top: 42.8%; left: 21%; z-index: 1; /*margin-top: 10px; margin-left: 30px; margin-bottom: 15px;*/ border: 2px outset black; } #searchBtn { /*display: none;*/ position: absolute; top: 42.8%; left: 32.4%; z-index: 1; cursor: pointer; /*margin-top: 10px; margin-left: 5px; margin-bottom: 15px;*/ border: 2px outset black; } #searchBtn:hover { color: #222; /*margin-top: 10px; margin-left: 5px; margin-bottom: 15px;*/ border: 1px outset black; } #searchBtn:active { color: #444; /*margin-top: 10px; margin-left: 5px; margin-bottom: 15px;*/ border: 1px inset black; } #genre { position: absolute; top: 47%; left: 21%; z-index: 1; cursor: pointer; /*margin-left: 30px; margin-bottom: 15px;*/ background: #ddd; width: 100px; border: 2px outset black; } #artiste { position: absolute; top: 47%; left: 30.9%; z-index: 1; cursor: pointer; /*margin-bottom: 15px; margin-left: 0px;*/ background: #ddd; width: 200px; border: 2px outset black; } #album { position: absolute; top: 47%; left: 50.5%; z-index: 1; cursor: pointer; /*margin-bottom: 15px; margin-left: 0px;*/ background: #ddd; width: 200px; border: 2px outset black; } #annee { position: absolute; top: 47%; left: 70.1%; z-index: 1; cursor: pointer; /*margin-bottom: 15px; margin-left: 0px;*/ background: #ddd; width: 70px; border: 2px outset black; }
A voir également:
- Pb css : z-index et calques
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
Bonjour romain,
pour pouvoir continuer à accéder a tes <select>, il faut que ceux-ci aient le calque avec un z-index le plus haut.
il n'y a pas d'autres moyens...
pour pouvoir continuer à accéder a tes <select>, il faut que ceux-ci aient le calque avec un z-index le plus haut.
il n'y a pas d'autres moyens...
Bonjour le survivant,
Si ce que j'ai fait ne peut pas marcher, connaitrais-tu une solution pour poser un cadre (crée à partir d'un logiciel d'éditions d'images) dessus un groupe de plusieurs 'select', tout en gardant le controle par rapport aux select (car pour l'instant, je ne peux plus cliquer).
En fait, je pensais qu'il existerait une propriété css qui permettrait d'accéder aux 'select' placés en "arrière-plan" d'une image.
Si tu as des idées sur le sujet, je veux bien en savoir plus.
Merci.
Si ce que j'ai fait ne peut pas marcher, connaitrais-tu une solution pour poser un cadre (crée à partir d'un logiciel d'éditions d'images) dessus un groupe de plusieurs 'select', tout en gardant le controle par rapport aux select (car pour l'instant, je ne peux plus cliquer).
En fait, je pensais qu'il existerait une propriété css qui permettrait d'accéder aux 'select' placés en "arrière-plan" d'une image.
Si tu as des idées sur le sujet, je veux bien en savoir plus.
Merci.