Aller au contenu

texte à droite d'une image


Sylvain Trovalet

Sujets conseillés

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é par Sylvain Trovalet
Lien vers le commentaire
Partager sur d’autres 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>

Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...