18067 sujets

Questions générales et questions de débutants

[Resolu] Pb de liens et z-index sous IE.

Bonjour,
ça fait un an que je trouve mes réponses ici, félicitations pour la qualité du forum ...

Mais cette fois je sèche ... je prépare un menu dans un div qui contient une image redimensionnable (ce qui interdit le background-image) et des div de liens s'y superposent avec du javascript pour le rollover.

Tout est nickel sous FF et sous IE il semble que l'image de fond (z-index: 0) soit au dessus des div de liens (z-index 4 et 5), du coup aucun liens clicables sous IE ...!

Quelqu'un à une idée ? (ça ressemble au pb de Demostene ds le message du 10 avril 06 mais je ne peux pas contourner ça à cause de l'image redimensionnable ...)

Merci d'avance, ci-dessous les codes html, css et jscript :


<html>
<head>
<title>Menu haut</title>
<script src="jscript.js" language="JavaScript" type="text/javascript"></script>
<link rel=stylesheet type="text/css" href="stylestest.css">
</head>
<body>
  <div id="menuhaut"> <!---Conteneur Menu Haut--->
	<img id="imgmenuhaut" src="images/Menu_haut_off.jpg" alt="">
	  
    <a href="#">
		<div id="accueil">
    <img id="imgaccueil" src="images/imgmonopixel.gif" alt="" onmouseover="montre(this.id);" onmouseout="cache(this.id);">
    </div>
		</a>

		<a href="#">
		<div id="panneaux">
		<img id="imgpanneaux" src="images/imgmonopixel.gif" alt="" onmouseover="montre(this.id);" onmouseout="cache(this.id);">
    </div>
		</a>
		
		<a href="#">
		<div id="quincaillerie">
		<img id="imgquincaillerie" src="images/imgmonopixel.gif" alt="" onmouseover="montre(this.id);" onmouseout="cache(this.id);">
    </div>
		</a>
		
		<a href="#">
		<div id="logo">
		<img id="imglogo" src="images/imgmonopixel.gif" alt="" onmouseover="montre(this.id);" onmouseout="cache(this.id);">
    </div>
		</a>

		<a href="#">
		<div id="stock">
		<img id="imgstock" src="images/imgmonopixel.gif" alt="" onmouseover="montre(this.id);" onmouseout="cache(this.id);">
    </div>
		</a>
		
		<a href="#">
		<div id="servclt">
		<img id="imgservclt" src="images/imgmonopixel.gif" alt="" onmouseover="montre(this.id);" onmouseout="cache(this.id);">
    </div>
		</a>
		
		<a href="#">
		<div id="quiestsnds">
		<img id="imgquiestsnds" src="images/imgmonopixel.gif" alt="" onmouseover="montre(this.id);" onmouseout="cache(this.id);">
    </div>
		</a>

  </div>		
  </body>
</html>



/*-------CSS Generale------*/

img {
  border: none;
}


/*--------Menu haut--------*/

#menuhaut {
  display: block;
  position: relative;
	top: 0;
	left: 0;
	z-index: 0;
	zoom: 1;
}

#imgmenuhaut {
  display: block;
	float: bottom;
  width: 100%;
	height :auto;
	top: 0;
	left: 0;
	z-index: 0;
}

/*---Accueil---*/

#accueil {
  position: absolute;
	width: 11.91%;
	height: 26.76%;
  top: 57.28%;
  left: 2.977%;
	z-index: 4;
}

#imgaccueil {
  position: absolute;
  width: 100%;
	height: 100%;
	z-index: 5;
}

/*---Panneaux---*/

#panneaux {
  position: absolute;
	width: 11.993%;
	height: 26.76%;
  top: 57.28%;
  left: 16.046%;
	z-index: 4;
}

#imgpanneaux {
  position: absolute;
  width: 100%;
	height: 100%;
	z-index: 5;
}

/*---Qunicaillerie---*/

#quincaillerie {
  position: absolute;
	width: 14.226%;
	height: 26.76%;
  top: 57.28%;
  left: 29.28%;
	z-index: 4;
}

#imgquincaillerie {
  position: absolute;
  width: 100%;
	height: 100%;
	z-index: 5;
}

/*---Logo---*/

#logo {
  position: absolute;
	width: 10.504%;
	height: 68.544%;
  top: 24.413%;
  left: 44.995%;
	z-index: 4;
}

#imglogo {
  position: absolute;
  width: 100%;
	height: 100%;
	z-index: 5;
}

/*---Stock---*/

#stock {
  position: absolute;
	width: 10.752%;
	height: 26.76%;
  top: 57.28%;
  left: 56.989%;
	z-index: 4;
}

#imgstock {
  position: absolute;
  width: 100%;
	height: 100%;
	z-index: 5;
}

/*---Service client---*/

#servclt {
  position: absolute;
	width: 12.82%;
	height: 26.76%;
  top: 57.28%;
  left: 68.320%;
	z-index: 4;
}

#imgservclt {
  position: absolute;
  width: 100%;
	height: 100%;
	z-index: 5;
}

/*---Qui est SNDS---*/

#quiestsnds {
  position: absolute;
	width: 16.046%;
	height: 26.76%;
  top: 57.28%;
  left: 81.555%;
	z-index: 4;
}

#imgquiestsnds {
  position: absolute;
  width: 100%;
	height: 100%;
	z-index: 5;
}



function cache(idul) {
	 document.getElementById(idul).setAttribute("src", "images/imgmonopixel.gif");
}

function montre(idul) {
  	switch (idul) {
					 case "imgaccueil":
					 document.getElementById(idul).setAttribute("src", "images/accueil.jpg");
					 break;
					 case "imgpanneaux":
					 document.getElementById(idul).setAttribute("src", "images/panneaux.jpg");
					 break;
					 case "imgquincaillerie":
					 document.getElementById(idul).setAttribute("src", "images/quincaillerie.jpg");
					 break;
					 case "imglogo":
					 document.getElementById(idul).setAttribute("src", "images/logo.jpg");
					 break;
					 case "imgstock":
					 document.getElementById(idul).setAttribute("src", "images/stock.jpg");
					 break;
					 case "imgservclt":
					 document.getElementById(idul).setAttribute("src", "images/servclt.jpg");
					 break;
					 case "imgquiestsnds":
					 document.getElementById(idul).setAttribute("src", "images/quiestsnds.jpg";
					 break;
		}
}

Modifié par lo_runisland (21 Jun 2006 - 07:46)
Bonjour lo_runisland et bienvenue parmi nous !

Comme indiqué dans l'une des Règles de base du forum, il est plus lisible d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
En faisant valider le code j'ai dû remettre chaque balise a a l'interieur des div concernés (plus deux tirets au lieu de trois sur un commentaire <!-- ... -->), ça m'a rendu les liens clicables sous IE mais le div (donc la zone clicable) est deux fois plus grand que sous FF ... je vais voir pour corriger avec un hack ...
Sujet clos
Aller à