11548 sujets

JavaScript, DOM et API Web HTML5

Jparallax : ne fonctionne que sur Firefox, ou est mon erreur ?

Bonjour à tous,

J'ai récemment commencé à développer un header avec du parallax. Il s'agit d'un effet parallax horizontal. Tout fonctionne bien sur Firefox mais sur IE et sur Google Chrome ca bouge en vertical aussi ! Je ne comprends pas très bien pourquoi.
Pouvez-vous m'aider s'il vous plait ? Merci d'avance.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link charset="utf-8" media="screen" type="text/css" href="css/style.css" rel="stylesheet">

<!-- Inclusion de jQuery et du script de parallax -->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>

<!-- script qui permet de lancer la fonction jparallax lorsqu'on est dans la balise avec l'id parallax -->

<script type="text/javascript">
$(document).ready(function () {  
       $('#parallax').jparallax();
});  
</script>


</head>

<body>
<div id="topbar">
    <div id="wrap">
    
        <div id="header">
       
            <div id="parallax">
			    		
    		<!-- Ici j'utilise une balise p dans laquelle je mets l'image afin de pouvoir régler la taille sans déformer l'image ou sans meme devoir passer par photoshop pour régler la taille de l'image. le dernier -->
                
                <p style="width:1030px;"><img src="img-layout/image02.png"/></p>
                <p style="width:1035px;"><img src="img-layout/image03.png"/></p>
                <p style="width:1045px;"><img src="img-layout/image04.png"/></p>
                <p style="width:1055px;"><img src="img-layout/image01.png"/></p>
               
            </div>
                
        </div>
        
        <div id="menu">
        
            <ul>
                <li><a class="menu" href="#">HOME</a></li>
                <li><a class="menu" href="#">HOME</a></li>
                <li><a class="menu" href="#">HOME</a></li>
                <li><a class="menu" href="#">HOME</a></li>
            </ul>    
        </div>
        
        <div id="content">
        &nbsp;
        </div>
        
        <div id="footer">
        &nbsp;
        </div>
    
    </div>
</div>
</body>
</html>




body {
    background-color: #FFFFFF;
    margin: 10px 0 0;
	background:url(../img-layout/background.jpg) repeat;
}

img {
    border: 0 none;
}


div#wrap {
    height: auto;
    margin: 0 auto;
    width: 1055px;
}

div#header {
    height: 261px;
}

div#topbar{
	position:absolute;
	top: 0px;
	background:url(../img-layout/topbar.png) top repeat;
	width:100%;
	height:17px;
}

div#content {
    height: 400px;
    width: 1050px;
	background-color:#FFF;
}

div#menu {
	background:url(../img-layout/menu.png) no-repeat top;
	width:1070px;
	height:100px;
	margin:-44px 0 0 -4px;
	padding:0;
	
}


@font-face{
    font-family : "LeagueGothic";
    src : url('../font/LeagueGothic.otf');
}

div#footer {
    clear: both;
    height: 20px;
    margin: 10px 0 0;
    text-align: right;
    width: 870px;
}

div#parallax {
    height: 253px;
    margin-top:9px;
    overflow: hidden;
    position: relative;
    width: 1055px;
	!important position:absolute;
 }
 
 
ul {
	 padding:0;
	 margin:0;
	 list-style-type:none;
	 
 }
 
li {
	 margin-left:2px;
	 float:left; /*pour IE*/
 }
 
ul li a.menu {
	 display:block;
	 float:left;   
	 text-decoration:none;
	 padding:5px;
	 color:#FFF;
	 font-family:"LeagueGothic", sans serif;
	 font-size:34px;
	 text-align:left;
	 /*pour avoir un effet "outset" avec IE :*/
 }
 
ul li a.menu :hover {
	color:#000;
 }
Sujet clos
Aller à