Bonjour à tous,

je suis en train de faire un site avec un viewer de panoramas simple en JQUERY.
J'ai pris le code sur un tuto, mon idée est de réaliser un 360° de l'intérieur d'une boutique et de mettre cet effet en background.

J'ai modifier le code comme il me plaisait pour réaliser cela.

Seulement j'ai une En-tête, un bas de page et un menu à rajouter.
Cela a été fait (sauf pour le menu pour le moment) mais mes nouveaux elements ne s'affichent pas !
Ils fonctionnent car je les avait réalisé au préalable en attendant de trouver le code pour mon background.

Mon code HTML :
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" />
<link rel="stylesheet" type="text/css" href="css/feuilledestyle.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>
</head>

<body>
<!-- début du contenu du header -->
<div id="header">
			<div id="logo"><div id="nom"></div></div>
</div>
<!-- fin du contenu du header-->
				
<div id="page">	
<img src="img/background.jpg" class="panorama" width="2294" height="900" />
</div>

<footer>
<div class="footer">	
</div>
</footer>

</body>
</html>


Mon code CSS :

body 		{
			background-image: ;
			text-align: center;
}
			/* debut du header */
#header		{background-image: url("Ruban.png");
			width: 100%;
			height: 107px;
			position: fixed;
			margin-left: auto;
			margin-right: auto;
			margin-top: 0px;
			z-index: 7;
			}
			
#nom		{background-image: url("nom.png");
			width: 631px;
			height: 40px;
			margin-top: 30px;
			position: fixed;
			margin-left: 130px;
			z-index: 8;
			}
			
#logo		{background-image: url("logo.jpg");
			width: 110px;
			height: 176px;
			box-shadow: 1px 1px 5px #000000;
			position: fixed;
			margin-left: 250px;
			z-index: 9;
			}
			/* fin du header */
			
#page {		position: fixed;
			z-index: 3;
			text-align: center;
			color: white;
}

#page a {
			color: white;
}

#page .panorama-viewport {
			margin-left: auto;
			margin-right: auto;
}

			/* debut du bottom */
			
div.footer	{width: 1100px;
			height: 105px;
			border: 1px solid red;
			background-image: url("IMAGES/footer-cafe.png");
			background-repeat: no-repeat;
			position: fixed;
			bottom: 0px;
			z-index: 2;
			}	

			/* fin du bottom */


Vous en pensez quoi ? Est-ce le code JQUERY qui plante mes codes ?
Modifié par kmicase (28 May 2013 - 16:34)