Titre: probleme d'affichage div mal placés
Posté par: barca84webmaster le le 24-10-2008 a 04:13:09
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
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:
// http://www.airtightinteractive.com/simpleviewer/options.html
//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>
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, et si possible centré en hauteur avec la galerie, comment faire ?
Merci pour votre aide |
Titre: Re:probleme d'affichage div mal placés
Posté par: HiRoN le le 19-11-2008 a 17:41:32
| Quel DocType utilises-tu ? Tu ne le précises pas... |
Titre: Re:probleme d'affichage div mal placés
Posté par: barca84webmaster le le 20-11-2008 a 12:17:58
Bonjour, voici le code complet de la page actuelle
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="cecile_favicon" type="image/ico" />
<title>MaTcherie.com</title>
<!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */
.menu1 {padding:0 0 0 300px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(button3.gif);}
.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;
}
#flash_player_content {
width: 100%;
height: 580px;
}
#flashcontent {
width: 88%;
height: 580px;
float:left;
}
#playercontent {
width: 200px;
height: 580px;
position:absolute;
right: 10px;
left: 10px
margin-left: 750px;
margin-top: 150px;
float-left:;
}
/* 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: #181818;
color:#FFFFFF;
width: 100%;
height: 12px;
padding: 5px 0 10px 0;
text-align: center;
font-family:sans-serif;
font-size:14;
clear: both;
}
</style>
</head>
<body>
<div id="header" >
<ul class="menu1">
<li class="current"><a href="../index.html"><b>Galerie 2004</b></a></li>
</ul>
</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", "88%", "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:
// http://www.airtightinteractive.com/simpleviewer/options.html
//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>
<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=13357132&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=13357132&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>
</div>
<div id="footer"><a>© 2008 - Thierry HELLEU - Photographe</a></div>
</body>
</html>
Ou dois-je préciser le doctype et lequel,
Merci pour votre réponse |
Titre: Re:probleme d'affichage div mal placés
Posté par: HiRoN le le 20-11-2008 a 14:52:55
DocType :
Explication : http://xhtml.developpez.com/faq/?page=html_generalites#html_doctype_utilite (http://xhtml.developpez.com/faq/?page=html_generalites#html_doctype_utilite)
Utilisation : http://xhtml.developpez.com/faq/?page=html_generalites#html_doctypes (http://xhtml.developpez.com/faq/?page=html_generalites#html_doctypes) |
Titre: Re:probleme d'affichage div mal placés
Posté par: barca84webmaster le le 20-11-2008 a 17:13:16
Merci pour l'info au niveau du doctype, ce doit être le b-a/ba du XHTML, j'ai sauté des étapes. J'ai consulté les liens mais je ne sais toujours pas quel dcotype utiliser, lequel me recommanderiez-vous ?
Question subsidiaire, lors de créations de pages ultérieures, garde-t-on le même doctype ou en changeons-nous pour différents types de sites, c'est là où je ne suis pas.
Merci |
Titre: Re:probleme d'affichage div mal placés
Posté par: HiRoN le le 20-11-2008 a 20:03:01
Personnellement je travaille en xhtml 1.1 strict, mais je te conseille d'utilser le xhtml 1.0 transitionnal (il est + "souple" que le 1.1, tu valideras tes pages + facilement au w3c)
Néanmoins, tu peux aussi choisir un docType HTML, à toi de voir en fonction de ton code (le HTML & xHTML sont différent sur certains points, à toi de voir lequel correspond le mieu à ton développement)
Pour le 2ème point, une fois définit, le docType se répète de page en page (c'est donc le même), néanmoins, tu pourrais changer en fonction des pages, mais autant en choisir 1 et apprendre à bien développer avec ;) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|