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).
Version complète: sur le forum Webmaster Hub : texte à droite d'une image
Avec ton image en float tu devrais obtenir l'effet que tu cherche.
A lire : http://openweb.eu.org/articles/initiation_float/
A lire : http://openweb.eu.org/articles/initiation_float/
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
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
CODE
<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>
<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>
Bon et bien finalement je me suis trompé, le float left marche bien.
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.
HTML
<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>
<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.
voila 
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
je vous donne un url temporaire :http://www.ville-bais.fr/espacesdeloisirs/...lexesportif.php
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
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
CITATION(Sylvain Trovalet @ 28 Oct 2004, 14:57)
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
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
CODE
/* 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;
}
h1,p,address,h2,ul,dl
{
zoom : 1;
}
Propriété zoom "de provenance inconnue"
à supprimer.
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.
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.
ok j'ai trouvé 
j'ai rajouté une largeur au conteneur et du coup tout s'affiche.
j'ai rajouté une largeur au conteneur et du coup tout s'affiche.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.