5568 sujets

Sémantique web et HTML

[Réglé] Petit problème de div pour structurer ma page

Bonjour à tous,

Débutant que je suis, j'ai pas mal parcouru la section "apprendre" du site, qui ma toujours bien aidé, mais la je coince. Je souhaite tout simplement afficher plusieurs vidéos sur ma page suivi d'un texte sur la gauche de chacune des vidéos.

Pour la première vidéo tout ce passe bien, mais dès que je souhaite en rajouter cela se chevauche, je me doute que je dois mal m'y prendre, mais je trouve pas alors peut être que quelqu'un pourrait m'aider..

Voici ce que j'ai mis pour la premiere vidéo : 

<div style="float:left;width:430px;margin-right:25px"> <object width="420" height="339"><param name="movie" value="http://www.dailymotion.com/swf/xbplx6" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://www.dailymotion.com/swf/xbplx6" type="application/x-shockwave-flash" width="420" height="339" allowFullScreen="true" allowScriptAccess="always"></embed></object><br /></div>

Vidéo formation - Barre des tâches

<p>La barre des tâches.. blablablablablabla<br />blablablablablabla <a href="index.php?option=com_content&view=article&id=35&Itemid=11">En savoir plus...</a></p></div>
<br />


Ce qui donne :

http://img228.imageshack.us/img228/1200/11670057.png

Et lorsque que je rajoute une autre vidéo : 

<div style="float:left;width:430px;margin-right:25px"> <object width="420" height="339"><param name="movie" value="http://www.dailymotion.com/swf/xbplx6" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://www.dailymotion.com/swf/xbplx6" type="application/x-shockwave-flash" width="420" height="339" allowFullScreen="true" allowScriptAccess="always"></embed></object><br /></div>

Vidéo formation - Barre des tâches

<p>La barre des tâches.. blablablablablabla<br />blablablablablabla <a href="index.php?option=com_content&view=article&id=35&Itemid=11">En savoir plus...</a></p></div>
<br />

<div style="float:left;width:430px;margin-right:25px"> <object width="420" height="339"><param name="movie" value="http://www.dailymotion.com/swf/xbplx6" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://www.dailymotion.com/swf/xbplx6" type="application/x-shockwave-flash" width="420" height="339" allowFullScreen="true" allowScriptAccess="always"></embed></object><br /></div>

Vidéo formation - Barre des tâches

<p>La barre des tâches.. blablablablablabla<br />blablablablablabla <a href="index.php?option=com_content&view=article&id=35&Itemid=11">En savoir plus...</a></p></div>
<br />


Cela me donne ça :

http://img3.imageshack.us/img3/6175/91468018.png

J'imagine que cela ne doit pas être grand chose.. mais bon je trouve pas ce qui manque Smiley ohwell

Merci d'avance!
Modifié par UtOpiK (02 Jan 2010 - 15:03)
Ton code XHTML est invalide : il y a une balise fermant div de trop, les & ne sont pas échappées et l'élément embed ne fait pas partie du standard XHTML actuel. Corrige ton code comme suit :
<div class="video">
  <object type="application/x-shockwave-flash" width="420" height="339" data="http://www.dailymotion.com/swf/xbplx6">
    <param name="movie" value="http://www.dailymotion.com/swf/xbplx6" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
  </object> 
  Vidéo formation - Barre des tâches 
  <p>La barre des tâches.. blablablablablabla<br />blablablablablabla <a href="index.php?option=com_content&view=article&id=35&Itemid=11">En savoir plus...</a></p>
</div>

Et tu appliques le float: left à l'élément object au lieu de l'élément div. Et pour éviter ton souci, ajoute un clear: left à ton div (le tout dans une feuille de style externe plutôt que dans un attribut style : la maintenance sera grandement facilitée).
.video {
  width: 430px;
  margin-right: 25px;
  clear: left;
}
.video object {
  float: left;
}
En fait ce n'est pas totalement réglé, car bizarrement le css 

.video object { 
  float: left; 
}


n'est pas pris en compte

Du coup le texte passe en bas de la vidéo Smiley ohwell

Voici l'url de la page si vous pouvez jeter un oeil, je comprends pas.

http://www.homeinformatique.com/formation-windows-7/47-barre-des-taches-windows-7

Du coup j'ai essayer de passer le float left directement sur le css vidéo, ca fonctionne, mais lorsque je met d'autre vidéo à la suite le texte qui doit être à coté passe à voté de la première vidéo.

[EDIT] J'ai réussi à me débrouiller en agrandissant le "width" forcément, ca pouvais pas fonctionner.

Merci encore
Si quelqu'un à une idée de ce que je fait mal Smiley confus

Encore une fois merci beaucoup !
Modifié par UtOpiK (02 Jan 2010 - 15:03)
UtOpiK a écrit :
Si quelqu'un à une idée de ce que je fait mal Smiley confus

Vu que ton élément object occupe une largeur de 420 pixels, l'élément div conteneur, réglé à une largeur de 430 pixels, ne laissait que 10 pixels à la disposition du texte qui, à moins de n'être constitué que d'une lettre, passe à la ligne et sous l'élément object. Comme tu l'as fait, il suffisait de régler la largeur du div (ou de ne pas préciser de largeur).
Sujet clos
Aller à