> Tous les forums > Forum des Webmasters
 probleme d'affichage page web, div mal placés ?
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
CastorPC84
  Posté le 24/10/2008 @ 04:24 
Aller en bas de la page 
Petit astucien

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:
// 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⟨=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⟨=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>



Modifié par CastorPC84 le 10/11/2010 18:59
Publicité
y.bli
 Posté le 24/10/2008 à 07:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bonjour,

Il te manque une fermeture de la balise </DIV>

Tu peux aussi mettre ton player où tu veux précisément en imposant exactement l'emplacement de son DIV, par position:absolute, margin-left:...px et margin-top:...px

@+

y.bli
 Posté le 24/10/2008 à 22:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Re,

Je réponds ici et non par MP car à mon avis le principe du forum est que tout le monde puisse partager ; de plus si je me trompe il pourra y avoir quelqu'un qui corrige ou apporte des infos complémentaires.

Essaie de compléter ton DIV en le rendant en position absolue ; j'ai mis des valeurs au pif, tu pourras modifier.

#playercontent {
width: 200px;
height: 236px;
position:absolute;
margin-left:50px;
margin-top:250px;
}

de plus je vois que tu avais mis 200pix au lieu de 200px

et puis ferme le DIV qui n'est pas fermé, ajoute un troisième </div> à la suite des 2 autres

@+



Modifié par y.bli le 25/10/2008 00:02
CastorPC84
 Posté le 24/10/2008 à 22:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci y.bli, je n'avais pas trouvé le lien pour poster ma réponse (il est pourtant gros!) alors je t'avais envoyé un mp sans intention de na pas faire profiter la communauté de ton enseignement.

Je m'en vais de ce pas mettre en pratique et te tiens au courant.

Dreamer
 Posté le 24/10/2008 à 22:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Ce qui me gêne un peu , cest ceci

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

L'affichage en largeur se fait sur 100% , donc où trouver la place pour le lecteur mp3 ???

CastorPC84
 Posté le 24/10/2008 à 23:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bon, voilà, j'ai fait quelques modifs, rajouté un menu plus joli, mais mon problème n'est toujours pas résolu, ce foutu lecteur est tours dans le footer !!!!!!

J'ai suivi les conseils d'y.bli (corrigé ma faute de syntaxe 200px en lieu et place de 200 pix dans #flashcontent) rajouté position-absolute; margin-left: 50px; margin-top; 250px et fermé le 3ème DIV. (pas de changement)

J'ai aussi suivi les conseils de dreamer en changeant la valeur de largeur d'affichage de 100% à 85% pour laisser de la place au lecteur MP3 (pas de changement !)

Bref, j'avance pas, il y pourtant pas grand chose sur cette page !!



Modifié par CastorPC84 le 10/11/2010 19:01
y.bli
 Posté le 25/10/2008 à 00:00 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

position:absolute;
margin-top:250px;



Modifié par y.bli le 25/10/2008 00:01
Dreamer
 Posté le 25/10/2008 à 00:00 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Une autre idée , mets un float:right; à ton #playercontent

griggione
 Posté le 25/10/2008 à 00:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonsoir tous

Il manque la fermeture d'une div aussi

elle
 Posté le 25/10/2008 à 00:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu as une balise de fermeture div au mauvais endroit (prends une des trois qui étaient en bas et mets-la où je l'ai mise). Ensuite, si tu veux placer deux div une à côté de l'autre, elles doivent flotter (une à gauche et l'autre à droite).

d'éditeur de texte! Faut que je recommence!

</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=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&eacute;couvrez <a href='http://www.deezer.com/fr/aaron.html'>AaRON</a>!</font>



</div>
</div>









Modifié par elle le 25/10/2008 00:15
Dreamer
 Posté le 25/10/2008 à 00:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Tu as une balise de fermeture div au mauvais endroit (prends une des trois qui étaient en bas et mets-la où je l'ai mise). Ensuite, si tu veux placer deux div une à côté de l'autre, elles doivent flotter (une à gauche et l'autre à droite).

d'éditeur de texte! Faut que je recommence!

Ce que je disais ..............Tiens , j'ai vu un vol de Griggione !!

elle
 Posté le 25/10/2008 à 00:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Dreamer a écrit :

Ce que je disais ..............Tiens , j'ai vu un vol de Griggione !!

Oui, trop occupée à me battre avec l'éditeur de texte, je n'avais pas vu vos réponses.

CastorPC84
 Posté le 25/10/2008 à 00:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Coucou, me revoilou

Effectué quelques modifs comme conseillé par dreamer pour float:right

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

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

#playercontent {
width: 200px;
height: 236px;
position:absolute;
margin-left: 900px;
margin-top: 160px;
float:right;
}


comme conseillé par elle déplacé la balise de fermetur DIV

Bon, ça va déjà 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 partie balayées par le curseur, ça fait ça chez vous aussi ?

Il doit y avoir quelquechose 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.

Merci, on a déjà bien avancé, je reprends du poil de la bête !

CastorPC84
 Posté le 25/10/2008 à 00:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Je viens d'uploader à nouveau le fichier index.html modifié visible à cette adresse http://zartsico.redby.fr/matcherie/gallery1/index.html

J'aimerai savoir comment je peux fair pour avoir la même couleur de fond du footer que les autres DIV,

Merci à tous

elle
 Posté le 25/10/2008 à 01:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

CastorPC84 a écrit :

J'aimerai savoir comment je peux fair pour avoir la même couleur de fond du footer que les autres DIV,

Donne-lui la même couleur de fond : #181818 (tu lui as donné #222222 ). Ou alors tu ne lui en donnes pas, c'est celle du body qui s'appliquera si rien d'autre n'interfère...



Modifié par elle le 25/10/2008 02:09
elle
 Posté le 25/10/2008 à 01:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

CastorPC84 a écrit :

Bon, ça va déjà 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 partie balayées par le curseur, ça fait ça chez vous aussi ?

Non, moi le lecteur revient à sa place. Si tu veux tester rapidement et facilement différentes résolutions, tu peux installer Multires : http://www.maboite.qc.ca/gratuiciels-utilitaires.php#multires

Ah OK, je viens de voir pour la partie du lecteur qui disparaît : c'est probablement dû à tes deux div qui sont partiellement l'une sous l'autre. Mets des bordures ou des fonds de couleur différente pour tester, tu verras ce qui ne va pas.



Modifié par elle le 25/10/2008 01:39
CastorPC84
 Posté le 25/10/2008 à 02:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci pour le conseil. Je suis allé télécharger de ce pas MultiRes, je l'installerai demain, j'ai perdu un peu de temps sur ton site, j'ai dérapé sur les recettes de cuisine, ça m'a mis en appétit, je vais manger et me coucher ... il fera jour demain !

J'ai changé la couleur de fond du footer, je ne comprends pas comment j'avais pas trouvé tout seul, je savais, mais je suis un peu fatigué.

Merci beaucoup, je pense que ce qui reste à boucler devrait pouvoir être fait demain.



Modifié par CastorPC84 le 10/11/2010 19:02
Dreamer
 Posté le 25/10/2008 à 07:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Tu vas devoir revoir les dimensions car sur mon écran 1024x768 , je ne vois pas le footer ( obligé de me mettre en grand écran avec F11 ) et je vois le lecteur mais collé à la bordure !!

elle
 Posté le 25/10/2008 à 07:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Effectivement, il manque une barre de défilement verticale pour bien faire, même si c'est moins beau.

Dreamer
 Posté le 25/10/2008 à 08:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Effectivement, il manque une barre de défilement verticale pour bien faire, même si c'est moins beau.

Il y a surement un moyen pour avoir l'ensemble à 100% et pour cela , je pense à son diaporama qui lui est déjà à 100%

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

Peut-être en modifiant les dimensions .........

elle
 Posté le 25/10/2008 à 08:29 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Oui, sauf que ça ne garantira rien en hauteur...

Dreamer
 Posté le 25/10/2008 à 08:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Oui, sauf que ça ne garantira rien en hauteur...

Faut faire des essais !!!

elle
 Posté le 25/10/2008 à 08:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Même à ça, il n'y a pas moyen de prévoir l'espace vertical d'affichage disponible chez l'utilisateur... Pense aux barres d'outils, aux lignes d'onglets...

Dreamer
 Posté le 25/10/2008 à 08:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Même à ça, il n'y a pas moyen de prévoir l'espace vertical d'affichage disponible chez l'utilisateur... Pense aux barres d'outils, aux lignes d'onglets...

Comme quoi , rien ne vaut XHTML + CSS .............

griggione
 Posté le 25/10/2008 à 10:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grand Maître astucien

Bonjour tous

Pourquoi ne pas mettre le playercontent en margin-right: 10px; pour l'avoir sur des résolutions moins importantes.

CastorPC84
 Posté le 25/10/2008 à 14:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour à vous, aide précieuse, compagnons d'une nuit laborieuse !

réponse à Dreamer msg 7:55, en 1024x768 je vois le footer, sous XP avec la barre des tâches masquée. Aussi, pour que le footer soit visible lorsque celle-ci ne l'est pas j'ai apporté une petite modif.

réponse à elle msg 7:58, évidemment, je ne veux pas de barre de défilement ... esthétique oblige !

réponse à Griggione, mis le playercontent en margin-right: 10px, nickel !

modifs apportées:

#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:right;
}

J'ai aussi apporté des modifs au fichier XML pour la présentation du diaporama flash simpleviewer.

Je ne suis pas mécontent du résultat.

Etant d'un naturel perfectionniste, il reste une juste une chose qui me chagrine, c'est la ligne blanche en haut du DIV #playercontent en contact avec le menu en haut à droite (petit détail, certes ... mais), détail que je ne sais pas régler !

Autre détail désagréable, l'épaisseur du trait de cadre blanc de l'icone sélectionnée pour l'affichage dans le diaporama flash simpleviewer ainsi que sa couleur (aussi celle du cadre autour des icones et de l'image du diaporama), mais là, je pense que je trouverai la solution, même si ce n'est pas dans l'immédiat, l'essentiel étant que la page s'affiche correctement.

Comme quoi , rien ne vaut XHTML + CSS ............. eh oui Dreamer, je suis d'accord, mais là, je suis pressé et ai des connaissances limitées dans le domaine mais j compte bien m'y mettre sérieusement, je me suis constitué une bibliothèque de manuels de formation pour l'hiver !

Merci à tous.



Modifié par CastorPC84 le 10/11/2010 19:05
Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
29,99 €Thrustmaster TCA Sidestick Airbus Edition pour PC à 29,99 €
50,79 € -41%

Cdiscount fait une promotion sur le joystick Thrustmaster TCA Sidestick Airbus Edition qui passe à 29,99 € au lieu de 50,79 € ailleurs. Il s'agit d'un une réplique ergonomique du manche Airbus, type A320/A320 Neo à échelle 1:1. Il dispose notamment d’une structure composée de 12 boutons d’actions ré-assignables pour une multitude de possibilités. La conception de la tête du joystick est à la fois polyvalente et modulaire grâce à ses éléments interchangeables. Avant chaque décollage, ajustez la configuration de votre manche de la manière la plus optimale : commandant de bord, co-pilote ou manche en position centrale pour les vols en avion en solitaire. 


Voir l'offre
149,99 €Disque dur externe Seagate Expansion Desktop USB 3.0 10 To à 149,99 €
259 € -42%

Fnac propose actuellement le disque dur externe Seagate Expansion Desktop USB 3.0 10 To à 149,99 € alors qu'on le trouve ailleurs à partir de 259 €. Ce disque dur dispose d'un grande capacité de stockage (10 To) et d'une connectique USB 3.0 qui vous offrira des transferts rapides. Il est compatible USB 2.0. Une très bonne affaire

Notez que le disque dur n'est pas soudé et que vous pouvez le récupérer pour l'utiliser dans un ordinateur ou un NAS (il s'agit d'un disque dur Barracuda Pro STST10000DM004 7200 Tr/min, 256 Mo de cache, CMR).


Voir l'offre
179,99 €Ecran 27 pouces HP X27 (FHD, IPS, 165 Hz, 1 ms, FreeSync) à 179,99 €
224 € -20%

Cdiscount fait une promotion sur l'écran 27 pouces HP X27 qui passe à 179,99 € au lieu de 224 €. Cet écran dispose d'une dalle IPS FHD (1920x1080) à 165 Hz, est compatible FreeSync et offre un temps de réponse de 1ms. Il possède des entrées DP et HDMI. Il possède des fonctions d'anti scintillement et anti lumière bleue. Il est réglable en hauteur et en inclinaison. 


Voir l'offre
899 €Ordinateur portable Lenovo 16 pouces (QHD, Ryzen 5, 16 Go RAM, SSD 512 Go, Vega 8) à 899 €
1200 € -25%

Boulanger fait une belle promotion sur l'ordinateur portable Lenovo Ideapad 5 Pro Gen6 16ACH6-057 qui passe à 899 € alors qu'on le trouve habituellement à partir de 1200 €. Cet ordinateur portable dispose d'un écran 16 pouces QHD (2560x1600), d'un processeur AMD Ryzen 7 5800H, de 16 Go de RAM, d'un SSD de 512 Go, d'un chip graphique Vega 8, d'une webcam, d'un lecteur de cartes mémoire et de connexions Bluetooth, WiFi, Ethernet, HDMI, USB 2.0 et USB 3.2. 

Le tout tourne sous Windows 11. Une très bonne affaire sur ce portable mobile et performant adapté au multimédia, bureautique, Internet et au jeu occasionnel.


Voir l'offre

Sujets relatifs
Probleme d'affichage sur page d'accueil de mon SITE
Probleme d'affichage d'onglet dans Google
Affichage sauvage page La redoute
probleme accès page administrator dans cms Joomla
Problème d'affichage google chrome
mise ne page css - probleme...
problème d'affichage d'un code d'ebuzzing
Problème affichage pages perso
gros problème d'affichage de mon site sous firefox
Problème de mise en page/rendu
Plus de sujets relatifs à probleme d''affichage page web, div mal placés ?
 > Tous les forums > Forum Forum des Webmasters