Jump to content
Sign in to follow this  
Sylvain Trovalet

texte à droite d'une image

Recommended Posts

Je cherche à faire une mise en page avec une image à gauche suivi sur la droite d'un paragraphe, et voulant que ce paragraphe s'il est plus long que la hauteur de l'image continue en dessous de l'image.

Un exemple de ce que je cherche sur : http://www.eyrolles.com/

Dans la rubrique "À la Une" on aperçoit un livre puis sa description. Si la résolution est en 800*600 le texte s'adapte automatiquement.

J'ai cherché dans le code source et j'ai vu une classe Ilcouv mais je n'ai pas réussi à la trouver dans la CSS, et puis surtout c'est un problème à priori trivial (enfin pour certains, mais pas pour moi).

Edited by Sylvain Trovalet

Share this post


Link to post
Share on other sites

alors pour le float

si j'inverse et mets le texte à gauche et l'image à droite avec un float: right ok ça marche.

Mais l'inverse est faux, car le texte va par dessus l'image au lieu de s'adapter ou fait encore un autre truc mais .. bref ça marche pas..

Et l'autre essai que j'ai fait mais qui n'est pas bon

<img src="/images/complexesportif/apercutennis.jpg" width="375" height="281" alt="photo du complexe sportif">
<p style="display : inline;">Cet endroit agréable est ouvert à tous. Chacun peut venir
se détendre ou s'entraîner en respectant les autres. Le terrain de tennis extérieur n'est pas fermé à clé,
il est juste demandé aux personnes qui utilisent ce court d'avoir des chaussures
appropriées (pas de crampons). En cas d'attente, il vous est demandé de bien vouloir libérer le court
après une heure de jeu, afin que tout le monde puisse en profiter.</p>

Share this post


Link to post
Share on other sites

Bon et bien finalement je me suis trompé, le float left marche bien.

<h2>Terrain de tennis</h2>
<img style="float: left;margin-right: 5px;" src="/images/complexesportif/apercutennis.jpg" width="375" height="281" alt="photo du complexe sportif">
<p>Dans un angle de cette aire de loisirs, un panneau de basket homologué vous attend pour découvrir
votre adresse au panier. Vous pouvez également pratiquer le tennis de table sur la table de ping-pong
d'extérieur.</p>
<p>Cet endroit agréable est ouvert à tous. Chacun peut venir
se détendre ou s'entraîner en respectant les autres. Le terrain de tennis extérieur n'est pas fermé à clé,
il est juste demandé aux personnes qui utilisent ce court d'avoir des chaussures
appropriées (pas de crampons). En cas d'attente, il vous est demandé de bien vouloir libérer le court
après une heure de jeu, afin que tout le monde puisse en profiter.</p>
<hr>

en fait je crois que lors de mes premiers tests j'avais dû mettre un float right sur le texte, forcément ça marchait pas.

Share this post


Link to post
Share on other sites

voila :)

Share this post


Link to post
Share on other sites

Une img n'est pas une boite mais un element inline... Ca donne quoi en integrant les images dans un div avec la class img.left? ca devrait marcher mieux je pense

Share this post


Link to post
Share on other sites

j'ai rajouté un display: block; dans ma classe mais ça n'a pas changé grand chose IE est toujours aussi récalcitrant tandis que mozilla et opéra sont oks

Share this post


Link to post
Share on other sites
j'ai rajouté un display: block; dans ma classe mais ça n'a pas changé grand chose IE est toujours aussi récalcitrant tandis que mozilla et opéra sont oks

<{POST_SNAPBACK}>

C'est inutile en effet : un élément en ligne flottant devient automatiquement un élément block.

Le problème du retour à la ligne dans IE vient de

/* Hack IE pour que certains éléments ne disparaissent pas à l'affichage, mettre * poserait problème au bandeau */
h1,p,address,h2,ul,dl
{
 zoom : 1;
}

Propriété zoom "de provenance inconnue" :wacko: à supprimer.

Share this post


Link to post
Share on other sites

effectivement cela corrige mon problème, mais cela en créé un autre et je n'ai toujours pas de solution

Une des pages qui pose problème :http://www.ville-bais.fr/viepratique/

et la page qui explique le bug : http://www.evolt.org/article/comment/17/23899/

malheureusement la solution proposée avec les positions relatives et celle avec le zoom donne le bug avec l'image et le texte à droite.

Bref je n'arrive pas à m'en sortir.

En fait je vais faire quelques tests encore et si je ne trouve rien je vais remettre mon zoom et faire des petits paragraphes au lieu de longs paragraphes, car le bug sera ainsi mineur.

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
Sign in to follow this  

×
×
  • Create New...