Jump to content

Recommended Posts

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 !!

 

Image 1.jpg

Edited by Unbossible
résolu (see edit history)

Share this post


Link to post
Share on other sites

mettre vertical-align:top sur l'image

Share this post


Link to post
Share on other sites

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 by Unbossible (see edit history)

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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" />

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More