Probleme de d'affichage div mal placés
CastorPC84
Messages postés
5
Statut
Membre
-
Mikey_UFC Messages postés 315 Statut Membre -
Mikey_UFC Messages postés 315 Statut Membre -
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="https://get.adobe.com/flashplayer/">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:
// https://www.simpleviewer.net/simpleviewer/support/v1_9/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://cdn-files.deezer.com/swf/kamino-v15.swf?sl=1&cs=0&path=12988760&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3769241"></param><embed src="http://cdn-files.deezer.com/swf/kamino-v15.swf?sl=1&cs=0&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>
Merci pour votre aide, je suis dans la mouise ! ! ! ! ! ! ! ! ! ! !
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="https://get.adobe.com/flashplayer/">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:
// https://www.simpleviewer.net/simpleviewer/support/v1_9/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://cdn-files.deezer.com/swf/kamino-v15.swf?sl=1&cs=0&path=12988760&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3769241"></param><embed src="http://cdn-files.deezer.com/swf/kamino-v15.swf?sl=1&cs=0&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>
Merci pour votre aide, je suis dans la mouise ! ! ! ! ! ! ! ! ! ! !
A voir également:
- Probleme de d'affichage div mal placés
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Problème affichage page internet google chrome ✓ - Forum Google Chrome
- Problème d'affichage/bugs graphiques sur Chrome sur Android - Forum Téléphones & tablettes Android
8 réponses
Bonjour la communauté !
J'ai résolu la plupart des problèmes que j'ai rencontrés, il en reste quelques un de mineurs comme celui-ci;
la ligne blanche en haut du DIV #playercontent en contact avec le menu en haut à droite, je ne sais pas comment faire pour que cela ne se voit pas du tout.
voici le lien du site http://zartsico.redby.fr/matcherie/gallery1/index.html
Merci à tous pour votre aide.
J'ai résolu la plupart des problèmes que j'ai rencontrés, il en reste quelques un de mineurs comme celui-ci;
la ligne blanche en haut du DIV #playercontent en contact avec le menu en haut à droite, je ne sais pas comment faire pour que cela ne se voit pas du tout.
voici le lien du site http://zartsico.redby.fr/matcherie/gallery1/index.html
Merci à tous pour votre aide.
Bonsoir,
En effet, tout est réglé sauf la ligne blanche qui apparait en haut du DIV #playercontent en contact avec le menu en haut à droite, je ne sais pas comment faire pour que cela ne se voit pas !
Merci encore à vous tous, si vous connaissez la solution pour cette ligne blanche, je suis preneur ! C'est pa bien grave, mais je suis pointilleux sur l'esthétisme.
En effet, tout est réglé sauf la ligne blanche qui apparait en haut du DIV #playercontent en contact avec le menu en haut à droite, je ne sais pas comment faire pour que cela ne se voit pas !
Merci encore à vous tous, si vous connaissez la solution pour cette ligne blanche, je suis preneur ! C'est pa bien grave, mais je suis pointilleux sur l'esthétisme.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
je suis pas très calé, aussi je ne connais pas cette fonction ... peux-tu m'expliquer exactement ce que cette ligne de code implique et me dire où je suis censé la positionner, dans le DIV #playercontent ? Merci
Dans le CSS de playercontent tu rajoutes
Ca doit enlever la bordure de ton div.
border:0px;( ça doit suffire)
Ca doit enlever la bordure de ton div.
#playercontent {
width: 200pix; => 200px :)
height: 236px;
}
Pourquoi tu remets : <div id="playercontent" style="width:180px;height:236px;">
Pourquoi si #flashcontent a width: 85%, playercontent n'a pas width:15%
Ensuite, je rajouterais peut-être un "float:left;" dans #flashcontent et "float:right;" dans #playercontent
width: 200pix; => 200px :)
height: 236px;
}
Pourquoi tu remets : <div id="playercontent" style="width:180px;height:236px;">
Pourquoi si #flashcontent a width: 85%, playercontent n'a pas width:15%
Ensuite, je rajouterais peut-être un "float:left;" dans #flashcontent et "float:right;" dans #playercontent
Merci Mikey_UFC, j'ai fait les modifs que tu m'as proposé et d'autres, ça va déjà beaucoup mieux.
Je vois mon lecteur, ai réussi à le placer plus ou moins correctement ... mais lorsque (dans Firefox) j'ouvre mon volet de marque-pages (c'est comme cela que je fais pour vérifier le comportement du Redimensionnement), la page se Redimensionne, là ça va, mais lorsque je le referme, le lecteur ne revient pas correctement à sa place, il est masqué en partie. Par contre, quand je passe la souris sur la partie masquée, le lecteur s'affiche en entier dans les parties balayées par le curseur, ça fait ça chez toi aussi ?
Il doit y avoir quelque chose qui coince encore !
Autre chose, mon DIV flashcontent déborde en bas sur le footer et le DIV playercontent déborde un peu par le haut sur le menu.
J'aimerai aussi savoir comment je peux faire pour avoir la même couleur de fond du footer que les autres DIV,
Je viens d'uploader à nouveau le fichier index.html modifié
Merci pour ton aide
Je vois mon lecteur, ai réussi à le placer plus ou moins correctement ... mais lorsque (dans Firefox) j'ouvre mon volet de marque-pages (c'est comme cela que je fais pour vérifier le comportement du Redimensionnement), la page se Redimensionne, là ça va, mais lorsque je le referme, le lecteur ne revient pas correctement à sa place, il est masqué en partie. Par contre, quand je passe la souris sur la partie masquée, le lecteur s'affiche en entier dans les parties balayées par le curseur, ça fait ça chez toi aussi ?
Il doit y avoir quelque chose qui coince encore !
Autre chose, mon DIV flashcontent déborde en bas sur le footer et le DIV playercontent déborde un peu par le haut sur le menu.
J'aimerai aussi savoir comment je peux faire pour avoir la même couleur de fond du footer que les autres DIV,
Je viens d'uploader à nouveau le fichier index.html modifié
Merci pour ton aide
