Discussion :

[Death83]

Salut à tous,

j'ai un petit soucis,

j'ai 6 block div cote à cote, dans chacun d'entre eux il y a une image. Lorsque je passe la souris par dessus un de ces blocks, un autre bloc s'affiche (avec position absolute). Cependant j'ai un problème, le bloc qui s'affiche est masqué par l'image qui est sur ca gauche.

J'ai essayé de résoudre celà en mettant des z-index, mais en vain...

De plus, sur mon menu j'ai également un block qui apparait au passage de la souris, et celui ci est également mordu par les images.

Si vous voulez vous en rendre compte par vous même passez la souris au dessus des images et au dessus de l'onget critique du menu:

http://www.castlemanga.com/ (le site est hébergé chez moi, c'est donc possible qu'il soit offline).

voici le code concerné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<div class="affcritdvd">
		<div class="conteneur">	
			<a href="critiques/dvd.php?iddvd=51" onmouseover="document.getElementById('aderdvd51').style.display='block';" onmouseout="document.getElementById('aderdvd51').style.display='none';"><img src="images/dvd/blood_the_last_vampire_image1_51.jpeg" alt="Blood The Last Vampire"/></a>	
			<div id="aderdvd51" class="infoover">
			</div>
		</div>
 
		<div class="conteneur">	
			<a href="critiques/dvd.php?iddvd=48" onmouseover="document.getElementById('aderdvd48').style.display='block';" onmouseout="document.getElementById('aderdvd48').style.display='none';"><img src="images/dvd/blood_the_last_vampire_image1_48.jpeg" alt="Blood The Last Vampire"/></a>	
			<div id="aderdvd48" class="infoover">
 
			</div>
		</div>
 
		<div class="conteneur">	
			<a href="critiques/dvd.php?iddvd=60" onmouseover="document.getElementById('aderdvd60').style.display='block';" onmouseout="document.getElementById('aderdvd60').style.display='none';"><img src="images/dvd/blood_the_last_vampire_image1_51.jpeg" alt="Blood The Last Vampire"/></a>	
			<div id="aderdvd60" class="infoover">
			</div>
		</div>
 
		<div class="conteneur">	
			<a href="critiques/dvd.php?iddvd=511" onmouseover="document.getElementById('aderdvd511').style.display='block';" onmouseout="document.getElementById('aderdvd511').style.display='none';"><img src="images/dvd/blood_the_last_vampire_image1_51.jpeg" alt="Blood The Last Vampire"/></a>	
			<div id="aderdvd511" class="infoover">
			</div>
 
		</div>
 
		<div class="conteneur">	
			<a href="critiques/dvd.php?iddvd=488" onmouseover="document.getElementById('aderdvd488').style.display='block';" onmouseout="document.getElementById('aderdvd488').style.display='none';"><img src="images/dvd/blood_the_last_vampire_image1_48.jpeg" alt="Blood The Last Vampire"/></a>	
			<div id="aderdvd488" class="infoover">
			</div>
		</div>
 
		<div class="conteneur">	
			<a href="critiques/dvd.php?iddvd=512" onmouseover="document.getElementById('aderdvd512').style.display='block';" onmouseout="document.getElementById('aderdvd512').style.display='none';"><img src="images/dvd/blood_the_last_vampire_image1_51.jpeg" alt="Blood The Last Vampire"/></a>	
			<div id="aderdvd512" class="infoover">
			</div>
		</div>
 
 
	<div class="separe"></div>
</div>

et les classes correspondantes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
.affcritdvd {
width:100%;
margin:auto;
text-align:center;
position:relative;
}
.affcritdvd img{
width:100px;
height:140px;
margin:4px;
border:1px black solid;
cursor:pointer;
z-index:-10;
}
.affcritdvd .conteneur{
float:left;
position:relative;
}
.affcritdvd  .infoover{
width:200px;
height:50px;
background-color:red;
display:none;
cursor:pointer;
position:absolute;
left:10px;
bottom:100px;
}
.separe 
{
clear: both; 
}

Si vous avez une idée, n'hésitez pas !

Merci d'avance .

[Linaa]

Il faut mettre un z-index plus elevé pour que ton menu passe au dessus, et non un z-index négatif !

[Death83]

Merci, en effet ca marche mieu comme ça .

Par contre savez vous pourquoi ca clignote (sous firefox) quand la souris est sur l'élements qui s'affiche au passage de la souris (les cadres rouges).

[Death83]

C'est bon j'ai réussi à résoudre le problème en mettant l'élement concerné à l'intérieur des balises <a>. (j'ai donc transformé le div en span ).

[Death83]

Bon en fait le problème n'est pas résolu :/. Enfin si pour firefox mais le problème est toujours la pour internet explorer (décidement).

Le z-index positif n'a aucun effet sur les cadres rouges qui sont toujours masqué par les images.

[Linaa]

Euh... C'est quoi le nouveau problème ?