texte à droite d'une image

[Sylvain Trovalet]

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).

Modifié 28 Octobre 2004 par Sylvain Trovalet

[Sebastien]

Avec ton image en float tu devrais obtenir l'effet que tu cherche.

A lire : http://openweb.eu.org/articles/initiation_float/

[Sylvain Trovalet]

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>

[Sylvain Trovalet]

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.

[Sebastien]

voila

[Sylvain Trovalet]

par contre sous IE en 800*600 j'ai un problème : le texte est bien à droite mais reste avec une colonne de même taille au lieu de continuer en dessous de l'image

je vous donne un url temporaire :http://www.ville-bais.fr/espacesdeloisirs/...lexesportif.php

[Sebastien]

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

[Sylvain Trovalet]

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

[LaurentDenis]

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" à supprimer.

[Sylvain Trovalet]

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.

[Sylvain Trovalet]

ok j'ai trouvé

j'ai rajouté une largeur au conteneur et du coup tout s'affiche.