pb : Je n'arrive plus à cliquer à cause d'un z-index

pb : Je n'arrive plus à cliquer à cause d'un z-index - HTML/CSS - Programmation

Marsh Posté le 13-11-2007 à 12:48:59    

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 :

Code :
  1. <div id = "cadre">
  2.          
  3.         </div>
  4.      
  5.         <div id = "search">
  6.           <input id = "searchText" type="text" size="15" />
  7.           <input id = "searchBtn" type="button" value="Chercher" OnClick="actualise();" />
  8.           <br />
  9.        
  10.           <select id = "genre" size="5" onchange= "actualise();">
  11.             <option value = "-1" selected> Tous </option>
  12.           </select>
  13.        
  14.           <select id = "artiste" size="5" onchange= "actualise();">
  15.             <option value = "-1" selected> Tous </option>
  16.           </select>
  17.        
  18.           <select id = "album" size="5" onchange= "actualise();">
  19.             <option value = "-1" selected> Tous </option>
  20.           </select>
  21.        
  22.           <select id = "annee" size="5" onchange= "actualise();">
  23.             <option value = "-1" selected> Tous </option>
  24.           </select>
  25.         </div>


 
et la partie css :
 

Code :
  1. #cadre
  2. {
  3. position: absolute;
  4. top: 42%;
  5. left: 20%;
  6. width: 60%;
  7. height: 24%;
  8. /*border: solid 1px red;*/
  9. background: transparent url(../images/cadre.png) no-repeat;
  10. z-index: 3;
  11. }
  12. #searchText
  13. {
  14. position: absolute;
  15. top: 42.8%;
  16. left: 21%;
  17. z-index: 1;
  18. /*margin-top: 10px;
  19. margin-left: 30px;
  20. margin-bottom: 15px;*/
  21. border: 2px outset black;
  22. }
  24. #searchBtn
  25. {
  26. /*display: none;*/
  27. position: absolute;
  28. top: 42.8%;
  29. left: 32.4%;
  30. z-index: 1;
  31. cursor: pointer;
  32. /*margin-top: 10px;
  33. margin-left: 5px;
  34. margin-bottom: 15px;*/
  35. border: 2px outset black;
  36. }
  38. #searchBtn:hover
  39. {
  40. color: #222;
  41. /*margin-top: 10px;
  42. margin-left: 5px;
  43. margin-bottom: 15px;*/
  44. border: 1px outset black;
  45. }
  47. #searchBtn:active
  48. {
  49. color: #444;
  50. /*margin-top: 10px;
  51. margin-left: 5px;
  52. margin-bottom: 15px;*/
  53. border: 1px inset black;
  54. }
  56. #genre
  57. {
  58. position: absolute;
  59. top: 47%;
  60. left: 21%;
  61. z-index: 1;
  62. cursor: pointer;
  63. /*margin-left: 30px;
  64. margin-bottom: 15px;*/
  65. background: #ddd;
  66. width: 100px;
  67. border: 2px outset black;
  68. }
  70. #artiste
  71. {
  72. position: absolute;
  73. top: 47%;
  74. left: 30.9%;
  75. z-index: 1;
  76. cursor: pointer;
  77. /*margin-bottom: 15px;
  78. margin-left: 0px;*/
  79. background: #ddd;
  80. width: 200px;
  81. border: 2px outset black;
  82. }
  84. #album
  85. {
  86. position: absolute;
  87. top: 47%;
  88. left: 50.5%;
  89. z-index: 1;
  90. cursor: pointer;
  91. /*margin-bottom: 15px;
  92. margin-left: 0px;*/
  93. background: #ddd;
  94. width: 200px;
  95. border: 2px outset black;
  96. }
  98. #annee
  99. {
  100. position: absolute;
  101. top: 47%;
  102. left: 70.1%;
  103. z-index: 1;
  104. cursor: pointer;
  105. /*margin-bottom: 15px;
  106. margin-left: 0px;*/
  107. background: #ddd;
  108. width: 70px;
  109. border: 2px outset black;
  110. }

Reply

Marsh Posté le 13-11-2007 à 12:48:59   

Reply

Marsh Posté le 13-11-2007 à 13:23:36    

pourquoi ne pas placer ton onclick="actualise();" que tu as sur l'input "searchBtn" au niveau de ton fameux div ?
Il suffit alors de faire en sorte que ta fonction "actualise" fasse bien son boulot sur les bons élements


---------------
We deserve everything that's coming...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed