problème d'affichage page html, div mal placés ?

CastorPC84 · le 24 octobre 2008

Bonjour la communauté, je pense que mon problème n'est pas difficile à résoudre mais j'ai un niveau débutant.

Voila l'objet de mon message: je veux afficher une galerie en flash à base de simple viewer et un lecteur de MP3 avec playlist (Deezer pour ne pas le nommer).

La page doit se constituer comme ceci:

Un div header (navigation)

Un div flash_player_content (contenant la galerie Flash Simple Viewer et à coté le lecteur MP3 Deezer)

Un div flashcontent contenant la galerie Flash Simple Viewer

Un div playercontent contenant le lecteur de MP3 avec playlist Deezer

Un div footer contenant le bas de page

C'est relativement simple, en apparence, je n'y arrive pas.

En fait le lecteur MP3 s'affiche dans la zone du footer au lieu de s'afficher à coté de la zone flashcontent.

J'espère que je me suis bien fait comprendre, je veux la galerie et le lecteur dans le même div, comment faire ?

Voici le code de la page

<style type="text/css">	
/* hide from ie on mac \*/
html {
	height: 100%;
	overflow: hidden;
}

#flash_player_content {
	width: 100%;
	height: 600px;
}

#flashcontent {
	width: 85%;
	height: 600px;
}

#playercontent {
	width: 200pix;
	height: 236px;
}

/* end hide */

body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #181818;
	color:#ffffff;
	font-family:sans-serif;
	font-size:16;
}

a {	
	color:#cccccc;
}

#header {
	text-align: center;
	background-color: #222222;
	width: 100%;
	height: 20px;
	padding: 10px 0 10px 0;

}

#footer {
	text-align: center;
	background-color: #222222;
	color:#FFFFFF;
	width: 100%;
	height: 12px;
	padding: 5px 0 10px 0;
}
</style>
</head>
<body>
<div id="header" >
	<a href = "../gallery1/index.html">Gallery 1</a> | <a href = "../gallery2/index.html">Gallery 2</a>	
</div>

<div id="flash_player_content" >

<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a>

<script type="text/javascript">

	var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");

	// SIMPLEVIEWER CONFIGURATION OPTIONS
	// To use an option, uncomment it by removing the "//" at the start of the line
	// For a description of config options, go to: 
	// [url="http://www.airtightinteractive.com/simpleviewer/options.html"]http://www.airtightinteractive.com/simpleviewer/options.html[/url]

	//fo.addVariable("xmlDataPath", "gallery.xml");
	//fo.addVariable("firstImageIndex", "5");	
	//fo.addVariable("langOpenImage", "Open Image in New Window");
	//fo.addVariable("langAbout", "About");	
	//fo.addVariable("preloaderColor", "0xFFFFFF");

	fo.write("flashcontent");	
</script>

<div id="playercontent" style="width:180px;height:236px;"><object width="180" height="236"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=12988760&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3769241"></param><embed src="http://www.deezer.com/embedded/widget.swf?path=12988760&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3769241" type="application/x-shockwave-flash" width="180" height="236"></embed></object><br><font size='1' color ='#000000' face='Arial'>Découvrez <a href='http://www.deezer.com/fr/aaron.html'>AaRON</a>!</font>
</div>	
</div>
<div id="footer">copyright 2008 Thierry HELLEU Photographe</a></div>
</body>
</html>

Le site de test est à cette adresse http://zartsico.redby.fr/matcherie/gallery1/index.html

Merci pour votre aide, je voulais absolument mettre en ligne la version fonctionnelle pour l’anniversaire de ma chérie samedi 25/10, je suis dans la mouise ! ! ! ! ! ! ! ! ! ! !

KewlCat · le 24 octobre 2008

En fait, #footer vient se placer dans #flash_player_content parce que #flashcontent n'est jamais "fermé"

Compte le nombre de <div> et le nombre de </div> ;-)

Une indentation correcte du source t'aurait permis de le remarquer tout de suite...

<body>
 <div id="header" >
<a href = "../gallery1/index.html">Gallery 1</a> | <a href = "../gallery2/index.html">Gallery 2</a>	
 </div>

 <div id="flash_player_content" >

<div id="flashcontent">
  SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a>

  <script type="text/javascript">
	(...)
	fo.write("flashcontent");	
  </script>

  <div id="playercontent" style="width:180px;height:236px;">
	<object width="180" height="236">
	  <param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=12988760&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3769241"></param>
	  <embed src="http://www.deezer.com/embedded/widget.swf?path=12988760&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3769241" type="application/x-shockwave-flash" width="180" height="236"></embed>
	</object>
	<br>
	<font size='1' color ='#000000' face='Arial'>Découvrez <a href='http://www.deezer.com/fr/aaron.html'>AaRON</a>!</font>
  </div>	

</div>

<div id="footer">copyright 2008 Thierry HELLEU Photographe</a></div>

</body>
</html>

Connexion

Pas encore inscrit ?

problème d'affichage page html, div mal placés ?

Messages recommandés

CastorPC84

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer