28173 sujets

CSS et mise en forme, CSS3

Image qui dépasse d'un paragraphe

Salut !

Pour planter le décor, voilà la situation :
J'ai attribué à un paragraphe qui peut contenir des images une largeur fixe (700px). Cela a l'avantage dans le cas d'une très grande image de ne pas avoir besoin d'utiliser le défilement horizontal pour lire le texte. Et l'image elle, dépasse du paragraphe.
Ca marche très bien sur IE et Firefox, mais ça pose problème avec Opéra et Safari ! En effet le texte reste sur 700px et les grandes images dépassent. mais il n'y a pas de barre de défilement horizontale pour pouvoir voir l'image en entier si elle est plus large que la résolution de l'écran ! en bref, un bout de l'image est "mangé" !

Comment pourrais-je faire pour résoudre ce problème ?

merci pour vos conseils ou solutions Smiley smile
Merci !

Oui, ici Smiley sweatdrop
Ha oui, le paragraphe est situé dans un tableau ! détail important !
Modifié par lorant (26 Aug 2007 - 23:10)
Bonjour,

Tu as peut-être compris que tu te trouves sur sur un forum qui traite aussi des CSS ?
Alors, on peut les utiliser pour faire ce que tu demandes et qui fonctionne dans Safari et Opera.

Je te propose de tester ces modifications dans ton code
      La ville a conservé un patrimoine important allant de l'époque romaine au XXe siècle 
      en passant par la Renaissance et, à ce titre, est inscrite au Patrimoine mondial de l'Unesco.
      [#orange]</p>
      <p style="width:600px; margin:1em auto; overflow:auto;">[/#]
        <img src="http://img503.imageshack.us/img503/3676/040003og9.jpg" alt=""/>
      </p>
C'est l'overflow qui va gérer la barre de défilement.
 
Modifié par Gihef (27 Aug 2007 - 00:38)
J'avais posté mon message ici justement parce que je pensais aux CSS !

Merci pour cette solution qui pourrait convenir en effet Smiley smile mais j'aurai préféré que la page s'affiche comme sous Firefox ou IE (voir la page), c'est à dire avec la barre de défilement au niveau de la page. C'est peut être pas possible ?

merci.
En y pensant un peu, on peut essayer d'adapter la taille du <p> à celle de l'image.
Et en supprimant l'overflow, bien-sûr.
      <p style="width:1600px; margin:1em auto; padding:0;">

 
Modifié par Gihef (27 Aug 2007 - 01:21)
Malheureusement le texte lui aussi s'étalle sur 1600px !

Mais ça m'a donné une idée ! vu que c'est destiné à un forum où le lien de l'image est donné par du bbcode, je peux mettre facilement l'image dans un paragraphe distinct du texte qui n'aura pas de limite de largeur CSS, et le problème est réglé :


<table border="1">
<tr>
<td>ville</td>
<td>
<p style="width:700px">Lyon est une ville française située au confluent du Rhône et de la Saône. C'est le chef-lieu du département du Rhône et de la région Rhône-Alpes. La ville a conservé un patrimoine important allant de l'époque romaine au XXe siècle en passant par la Renaissance et, à ce titre, est inscrite au Patrimoine mondial de l'Unesco.</p>
<p><img src="http://img503.imageshack.us/img503/3676/040003og9.jpg" alt=""/></p>
</td>
</tr>
</table>


Par contre ça fait un peu bricolage... Smiley confus
Modifié par lorant (27 Aug 2007 - 18:30)
Sujet clos
Aller à