28234 sujets

CSS et mise en forme, CSS3

[Résolu] Pb z-index

Hi !
j'ai actuellement un problème de superposition de calques à l'adresse suivante. Mon menu déroulant passe derrière des images qui se superposent.
Et je n'arrive pas à m'en sortir malgré l'utilisation des z-index. Et en plus, Firefox n'aime pas bien cette technique...

Voici mon code :

<div id="layer1"><img src="image1.jpg" /></div> 
<div id="layer2"><img src="image1.jpg" /></div> 
<div id="layer3"><img src="image1.jpg" /></div>


Voici mes css :

#layer1 {
	visibility: visible;
	position: absolute;
	z-index: 1;}
#layer2 {
	visibility: hidden;
	position: absolute;
	z-index: 1;}
#layer3 {
	visibility: hidden;
	position: absolute;
	z-index: 1;}
#menugauche dd {
z-index : 100;}}

Un petit script vient changer la visibilité du calque suivant l'endroit cliqué.
Je sais, ce n'est pas super sexy comme technique mais je n'en ai pas trouvé d'autre plus simple (toute suggestion est la bienvenue).

Une p'tite aide sur ces z-index me serait d'une grande utilité.

Thx
Modifié par kazcoco (13 Mar 2005 - 17:12)
Salut,
normal, chaque z-index doit avoir une valeur différante, ou alors, il faut les passer en auto. Smiley cligne
Pourquoi ils sont négatifs tes z-index ?
edit: pourquoi y'a plus de z-index Smiley biggrin

Si tu fais un petit test à l'arrache en relative, ça marche ?
Modifié par MrSoul (11 Mar 2005 - 23:09)
J'ai enlevé les paramètres z-index de mes calques layer et laissé celui de "dd" et ça marche...Je ne sais toujours pas pourquoi la superposition ne fonctionnait pas mais bon....

Si quelqu'un connait une autre façon qui soit compatible W3C de faire ce mini diaporama, je suis preneur. Smiley murf
le z-index négatif, c'était pour voir si le z-index fonctionnait...et apparamment oui avec Firefox (les images ont disparu derrière le body) et non avec IE (le menu passait bien dessus mais les images restaient visibles).
T'as du tomber pendant mes bidouilles...
Mystère !
En tous cas un grand merci pour t'être penché sur mon pb.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIMG(imgDoc,imgFile,imgComt) {
document.getElementById(imgFile).src=imgDoc;
document.getElementById(imgFile).alt=imgComt;
}
</script>
</head>
<body>
<a href="javascript:changeIMG('./albums/2004-10-23_anniv_zouzou/600/DSC_0001.jpg','droite','');"><img src="./albums/2004-10-23_anniv_zouzou/120/DSC_0001.jpg" alt=""/></a>
<img id="droite" src="./albums/2004-10-23_anniv_zouzou/600/DSC_0001.jpg" alt="" />
</body>
</html>


Hop, je te livre ma technique en brut, je l'utilise pour mes album photo (ici celui de l'anniv de zouzou, passionant non Smiley biggrin ).
C'est valide xhtml 1.1 et ça passe sous IE et Firefox sans problèmes !

En gros, ça va te changer les valeurs de la balise img, c'est plus simple Smiley ravi
Modifié par MrSoul (11 Mar 2005 - 23:24)
Simple comme B.

Un grand merci l'ami pour ce code sympa...C'est en ligne sur mon site et c'est mieux qu'avant :
---je n'ai pas à charger toutes les images les unes sur les autres
---c'est compatible W3C...

Thx. Smiley biggrin
Administrateur
Salut kazcoco et bienvenue ici Smiley cligne

Pourrais-tu utiliser les boutons de [ CODE] pour baliser tes exemples, comme l'a fait MrSoul, et comme c'est suggéré dans les Règles ? (merci d'éditer tes posts en conséquence).

Et si le sujet est réglé, n'oublie pas de réjouter un tag [Résolu] pour faciliter les recherches futures, merci Smiley cligne
Sujet clos
Aller à