28173 sujets

CSS et mise en forme, CSS3

[résolu]Probème de z-index!

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é :


<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:


.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 Smiley cligne .
Modifié par death83 (16 Dec 2006 - 17:31)
Bonjour,

Il m'est arrivé un truc un peu semblable, de mémoire essaye de positionner tes blocs en float : right et d'inverser leur ordre dans le code ...

Sait on jamais
Ouais j't avais pensé mais ca ne ferait que d'inverser le problème. Ca sera le coté gauche qui sera alors mordu. Le cadre que j'ai fait et qui dépasse sur la gauche est arbitraire, je peut tres bien le faire qui dépasse des 2 coté après.

J'ai réussi à résoudre le problème sous firefox en mettant des z-index:100; parci par la, par contre ca ne marche toujours pas avec IE. (par contre le menu déroulant passe bien par-dessus les images maintenant, bizarre)a
Salut death83,

Le code HTML a changé apparemment. Avec la nouvelle version, le plus simple serait à mon avis de ne plus appliquer la position relative à div.conteneur, mais seulement au survol du lien 
.conteneur a:hover {positon: relative}

Cela devrait régler le problème ave Internet Explorer.
Ou alors il faudrait appliquer à chaque fois une valeur différente pour le z-index, en surclassant (pas terrible donc)
Alan a écrit :

le plus simple serait à mon avis de ne plus appliquer la position relative à div.conteneur, mais seulement au survol du lien 
.conteneur a:hover {positon: relative}



Bravo

Smiley lol Smiley winner Smiley clapclap Smiley clapclap

en effet ca marche.

Je commencais à désespérer Smiley mur
Arf par contre il y a un problème maintenant sous Firefox.

Quand on place la souris sur le bloc rouge qui s'affiche, les images se mettent à valser Smiley bawling
Bon j'ai remis comme c'était avant, j'ai donc toujours le même problème sous IE. J'ai vraiment essayé plein de configurations différentes mais j'obtient toujours les images sous IE qui se mettent par dessus le bloc rouge qui s'affiche.

J'arrive vraiment pas à voir d'ou ca viens et comment corriger ce problème.
C'est bon !!

Dans un élan de "chance" et de hack css j'ai réussi enfin à faire un truc qui marche pour les 2.

Merci à tous quand même! Smiley lol
Raphael a écrit :

Hmm tu prends des risques que je ne prendrais pas à ta place :
http://forum.alsacreations.com/faq/#item40


Désolé je m'etais mal exprimé ^^.

En fait c'est pas du hack css que j'ai fait. J'inclu juste une feuille de style juste pour ie avec les commentaires conditionnels qui surcharge les classes prédéfinies.
Sujet clos
Aller à