[Résolu] Décalage sous la vidéo

[Unbossible]

Bonjour,

J'ai un problème avec ma page de contenu et les vidéos que j'essaye d'incorporer...

Dans la prévisualisation de photoshop, les 3 contenus sont alignés (2 vidéos et une image), or quand j'affiche la page dans le navigateur l'image est décalée vers le bas et il y a une espèce de zone vide sous les vidéos, et je ne comprend pas du tout pourquoi.

Quand j'enlève l'image je n'ai pas de décalage sous les vidéos. 

Code de la page :

<p>TINTI : le plaisir du bain !</p>
<p><img src="https://lechoppebio.fr/img/cms/Pellicule%20-%20Couleur.jpg" alt="" width="4545" height="996" /></p>
<p><iframe width="315" height="210" src="https://www.youtube.com/embed/ZwlU3yD4RcI" frameborder="0"></iframe><iframe width="315" height="210" src="https://www.youtube.com/embed/h8OMC_H2cFM" frameborder="0"></iframe><img src="https://lechoppebio.fr/img/cms/Europlabo_FR_BWF.jpg" alt="" width="210" height="210" /></p>
<p><img src="https://lechoppebio.fr/img/cms/Pellicule%20-%20Bain%20Magique.jpg" alt="" width="4545" height="996" /></p>

Et lien de la page : https://lechoppebio.fr/content/7-presentation-des-produits-tinti

 

Ce que j'ai déjà fait (sans succès) :

- j'ai enlevé les frameborder 

 - j'ai redimensionné un peu de toute les manières les images et vidéos

 

 

Edit : solutionné, merci beaucoup pour l'aide apportée !!

 

Edited June 24, 2019 by Unbossible
résolu (see edit history)

[doekia]

mettre vertical-align:top sur l'image

[Unbossible]

Je ne suis pas forcément très doué, comment on applique cette fonction CSS dans mon code html ?

j'ai essayé de rajouter un class="top" ou align="top" qui ne fonctionnent pas.

En CSS j'ai essayé :

<div style="vertical-align: top;"><iframe width="315" height="210" src="https://www.youtube.com/embed/ZwlU3yD4RcI" frameborder="0"></iframe><iframe width="315" height="210" src="https://www.youtube.com/embed/h8OMC_H2cFM" frameborder="0"></iframe> <img src="https://lechoppebio.fr/img/cms/Europlabo_FR_BWF.jpg" alt="" width="210" height="210" /></div>

mais le problème persiste, et si je mets juste l'image dans le div il me la met en dessous des vidéos : 

<iframe width="315" height="210" src="https://www.youtube.com/embed/ZwlU3yD4RcI" frameborder="0"></iframe><iframe width="315" height="210" src="https://www.youtube.com/embed/h8OMC_H2cFM" frameborder="0"></iframe> <div style="vertical-align: top;"><img src="https://lechoppebio.fr/img/cms/Europlabo_FR_BWF.jpg" alt="" width="210" height="210" /></div>

 

Oui je ne suis pas particulièrement doué ^^

 

Edit : entre-temps je viens de trouver une solution, si vous ouvrez la page vous verrez les 3 objets alignés sur une ligne (parce que je les ai intégré dans un tableau), mais j'aurais bien aimé solutionner le problème sans devoir mettre un tableau 

Edited June 24, 2019 by Unbossible (see edit history)

[doekia]

Pourquoi tenter mille et une chose et s'efforcer de ne pas suivre le conseil donné ???

IMAGE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Unbossible]

Ben justement je voulais suivre ton conseil et mettre "vertical-align:top" sur l'image mais je ne sais pas le faire...

J'ai essayé de le rajouter dans le code html de la page sans succès.

 

 

[Mediacom87]

Bonjour,

mettez vertical-align:top dans le style de l'image dans PrestaShop. Ce qui est un hérésie mais le plus simple à comprendre pour vous.

Après, prenez le temps d'apprendre des choses, comme le CSS qui est obligatoire si vous souhaitez personnaliser votre boutique et faire des mises en pages.

[Unbossible]

Mais comment l'intégrer dans le code source ? 

J'ai essayé comme cela : 

<iframe width="315" height="210" src="https://www.youtube.com/embed/ZwlU3yD4RcI" frameborder="0"></iframe><iframe width="315" height="210" src="https://www.youtube.com/embed/h8OMC_H2cFM" frameborder="0"></iframe> <div style="vertical-align: top;"><img src="https://lechoppebio.fr/img/cms/Europlabo_FR_BWF.jpg" alt="" width="210" height="210" /></div>

 

Et ça ne fonctionne pas... je suppose que c'est la façon de l'incorporer n'est pas bonne.

 

[Mediacom87]

Perso j'utiliserais bootstrap pour tout caler comme il faut. Mais faudrait apprendre bootstrap.

sinon un truc du style :

<iframe width="315" height="210" src="https://www.youtube.com/embed/ZwlU3yD4RcI" frameborder="0"></iframe>
<iframe width="315" height="210" src="https://www.youtube.com/embed/h8OMC_H2cFM" frameborder="0"></iframe>
<img src="https://lechoppebio.fr/img/cms/Europlabo_FR_BWF.jpg" alt="" width="210" height="210" style="vertical-align: top" />

 

[Unbossible]

Ca fonctionne, merci beaucoup pour l'aide !!

[Mediacom87]

Merci à Doekia surtout qui avait proposé la solution dès la première réponse.