11496 sujets

JavaScript, DOM et API Web HTML5

Background JQUERY mais l'affichage CSS et HTML n'apparaient pas

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 éléments 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 ?

L'effet est celui-ci : http://www.openstudio.fr/jquery.panorama/
Le tuto est : http://www.openstudio.fr/Un-viewer-de-panoramas-simple-en.html
Bonjour,

Un lien vers votre page en ligne serait plus approprié Smiley cligne
(manque un doctype et un titre à votre document)
Ça, si je ne m'abuse, c'est une image Smiley cligne

Si tu veux que quelqu'un puisse te venir en aide, il faut nous montrer les forces en présence Smiley cligne

Copier les codes, aller chercher les librairies que tu utilises, chercher une image qui puisse faire office de test, deviner se qui se cache derrière les fichiers ou les images que nous n'avons pas, faire des supputations, ...cela devient vite fastidieux, alors que tu as tout à portée de mains, et qu'il n'est pas très difficile de faire une page de test reproduisant ta problématique...
kmicase a écrit :
Je ne sais pas trop comment faire... Smiley decu


Le site est-il hébergé en ligne ?
Si oui, donne nous juste l'adresse pour y accéder.
Bonsoir,

Ça ne prends pas des plombes de faire une page de test, si tu as déjà un hébergement Smiley cligne

Sinon, tu as des outils en ligne assez pratiques pour ce genre de choses :
JsFiddle
Codepen
Dabblet

À très vite Smiley cligne
Sujet clos
Aller à