28172 sujets

CSS et mise en forme, CSS3

Jparallax problème de mise en forme sur Evil "IE"

Bonjour, je suis un petit nouveau sur le forum alsacréation (même si je viens souvent sur le site). Bref aujourd'hui j'ai un petit problème que je n'arrive pas a résoudre.
En effet j'ai voulu détourner le plugin Jquery "Jparallax" pour en faire un menu animé.
J'ai utilisé des positions relative sur mes <li> pour positionner par dessus des balises <a> en absolute pour qu'ils suivent les images contenus dans les <li>.
Tous se passe bien sur "Firefox", "Safari", "Opera" et "Chrome", mais devinez quel navigateur me pose problème Smiley lol ????
Oui c'est bien "IE" mais sous toutes ses versions : 6, 7, 8 et la beta 9.
liens : http://gayacomftp.fr/site_alsa/

Mon code sera plus parlant : 
<body>


  
<ul id="parallax" class="clear">
        <li style="width:1020px; height:720px;">
                <img src="img_gaya/pantone.png" alt="" style="position:absolute;left:40%;top:22%;"/><a id='pantone' href='#' style="position:absolute;left:40%;top:22%;">book</a>
  </li>
        <li style="width:1030px; height:730px;">
                <img src="img_gaya/tablette.png" alt="" style="position:absolute;left:38%;top:55%;" /><a id='tablette' href='#' style="position:absolute;left:40%;top:57%;">home</a>
  </li>
        <li style="width:1050px; height:750px;">
                <img src="img_gaya/enveloppe.png" alt="" style="position:absolute;left:71%;top:37%;" /><a id='enveloppe' href='#' style="position:absolute;left:72%;top:37%;">contact</a>
  </li>
        <li style="width:1095px; height:795px;">
                <img src="img_gaya/bulle.png" alt="" style="position:absolute; top:30%; left:50%;" />
  </li>
          <li style="width:1125px; height:925px;">
                <img src="img_gaya/cerveau.png" alt="" style="position:absolute; top:25%; left:67%;"/><a id='cerveau' href='#' style="position:absolute; top:21%; left:67%;">nous</a>
  </li>
            </li>
          <li style="width:1245px; height:925px;">
                <img src="img_gaya/calendrier.png" alt="" style="position:absolute; top:50%; left:69%;"/><a id='calendrier' href='#' style="position:absolute; top:50%; left:69%;">calendrier</a>
  </li>
</ul>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>
<script type="text/javascript">
  var inPullNav = false;  
  
  jQuery(document).ready(function(){
  
  	jQuery('#parallax').jparallax({}).append(corners);
  	
  });
</script>  

</body>



*{
	padding: 0;
	margin:0;
	}
	
html, body {
	font-size: 100%;
	font-family: Helvetica, Arial, sans-serif;
	background: url(../img_gaya/bg.jpg) #d2d2d0 no-repeat;
	height: 100%;
	overflow: hidden;
}

li{
	list-style: none;
	}
	
#parallax
	{
	clear:right; 
	position:relative; 
	width:900px; 
	height:600px;
	display: inline-block;
	}
	
#parallax li
	{
	position:relative; 
	}
	
#parallax li #pantone
	{
	position:absolute;
	display:block;
	width: 150px;
	height: 150px;
	z-index: 100;
	text-indent: -1000px;
	}
	
#parallax li #pantone:hover
	{
	background: url('../img_gaya/tiket_book.png') left top no-repeat;
	}
	
#parallax li #tablette
	{
	position:absolute;
	display:block;
	width: 190px;
	height: 190px;
	z-index: 110;
	text-indent: -1000px;
	}

#parallax li #tablette:hover
	{
	background: url('../img_gaya/tiket_home.png') left bottom no-repeat;
	}

#parallax li #enveloppe
	{
	position:absolute;
	display:block;
	width: 220px;
	height: 150px;
	z-index: 120;
	text-indent: -1000px;
	}

#parallax li #enveloppe:hover
	{
	background: url('../img_gaya/tiket_contact.png') 50px 0 no-repeat;
	}

#parallax li #cerveau
	{
	position:absolute;
	display:block;
	width: 150px;
	height: 150px;
	z-index: 130;
	text-indent: -1000px;
	}
	
#parallax li #cerveau:hover
	{
	background: url('../img_gaya/tiket_nous.png') 50px -10px no-repeat;
	}
	
#parallax li #calendrier
	{
	position:absolute;
	display:block;
	width: 200px;
	height: 180px;
	z-index: 140;
	text-indent: -1000px;
	}
	
#parallax li #calendrier:hover
	{
	background: url('../img_gaya/tiket_clients.png') 75px 40px no-repeat;
	}


Voilà, le problème c'est que sur "IE" mes z-index ne marche pas, seul le liens au premiers plan fonctionne. Je ne comprend vraiment pas l'interprétation "d'IE".
Modifié par gortez (31 Jan 2011 - 23:53)
Bonjour,

Il y a un </li> qui ne correspond à aucun <li>. Ce peut être la cause.

Le menu fonctionne partiellement sous IE8 (et surement IE7), la faute aux éléments qui se chevauchent je pense.

Sous IE6, oublie tout fonctionnement, le :hover sur les li ne passera pas.



ps. : d'un point de vue ergonomie et confort de l'utilisateur, le truc qui bouge quand on essaye de cliquer dessus, c'est pas top.
Modifié par Laurie-Anne (01 Feb 2011 - 08:49)
Yop!

Sous IE 9, les zones représentant tes boutons sont décalées, les boutons le plus à gauche ne sont carrément pas cliquables.

Par contre sous FF c'est pas mal, et contrairement à Laurie-Anne, je trouve que le "déplacement" induit par parallaxe est assez intuitif, du coup on est pas perdu quand on veux cliquer sur un élément.
Sujet clos
Aller à