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

[rom13]

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 :

<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;
}

[KewlCat]

Le z-index de #cadre est supérieur à celui des autres éléments, c'est donc normal que ce soit lui qui "mange" les clics destinés aux éléments que tu vois par transparence (les select) : il est "devant" !

D'ailleurs, si tu mettais directement ton image en background-image à #search, non seulement ça fonctionnerait, mais en plus ça serait plus logique...

 

-- edit --

En fait, c'est un bug de IE qui fait que tu vois les select par-dessus ton image. Essaie d'ouvrir ta page avec un navigateur différent (Opera, Firefox, Safari, ...) pour voir.