Page 1 sur 1
Positionnement par feuille de style
Publié : 18 mai 2007, 11:02
par Lilive
Bonjour,
Je positionne dans un bloc <div> une image et du texte qui sont agencés par une feuille de style. Mon soucis est que, uniquement sous Firefox, l'image dépasse sous le bloc qui est sencé la contenir...
Voici le code html :
Code : Tout sélectionner
<div id='info1'>
<img src="images/webcam.jpg" alt="Infra red cover">
<h3>Web Cam'</h3>
<p>
Découvrez dès Lundi le premier épisode d'As de Trèfle en Studio !!!
Régulièrement, de nouvelles vidéos de studio ou de concerts, prises au coeur du groupe, seront disponibles ici ...
<br>
<br>
<a href='videos.php?type=Studio'>En savoir +</a>
</p>
</div>
Et la feuille de style :
Code : Tout sélectionner
#info1
{width:475px;border:1px solid #FFFFFF;background-color:white;color:black;padding:10px;}
#info1 img
{height:200px;border:1px solid black;float:left;}
#info1 h3
{font-size:9pt;font-weight:bold;padding-left:240px;padding-right:40px;}
#info1 p
{font-size:8pt;padding-left:240px;}
L'affichage est tout a fait normal sous ie (et du coup ça me fait peur car cela voudrait dire que j'ai fait une erreur de code). Quelqu'un voit-il d'où vient le problème ?
Pour un visuel :
http://www.as-de-trefle.com/index.php
Merci de votre aide
Publié : 18 mai 2007, 11:59
par calimo
Le comportement de Firefox me semble tout à fait correct.
Tu dois utiliser la propriété css "clear"
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Publié : 18 mai 2007, 13:56
par Lilive
Merci, effectivement, je ne connaissais pas la propriété "clear"...
Seulement, j'ai été obligé de créer un bloc vide avec clear:both; qui vient se mettre sous l'image pour que le contenant prenne en compte le bas de l'image... Je suis un peu déçu car je trouve que ça fait un peu "bidouille" comme solution...
Pourquoi le conteneur ne prend-il pas en compte l'image qu'il contient et place sa "base" sous le texte au lieu de se mettre sous l'image ?
En attendant, ça fonctionne et je vous remercie mais j'espère trouver quelque chose de plus "propre"...
Publié : 18 mai 2007, 15:04
par calimo
Lilive a écrit :Merci, effectivement, je ne connaissais pas la propriété "clear"...
Seulement, j'ai été obligé de créer un bloc vide avec clear:both; qui vient se mettre sous l'image pour que le contenant prenne en compte le bas de l'image... Je suis un peu déçu car je trouve que ça fait un peu "bidouille" comme solution...
Ben oui mais c'est normal
Pourquoi le conteneur ne prend-il pas en compte l'image qu'il contient et place sa "base" sous le texte au lieu de se mettre sous l'image ?[/quote]Par définition ! La boite en float est sortie du flux !
http://www.w3.org/TR/CSS2/visuren.html#floats
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
La même chose est plus ou moins répété ici en français :
http://css.alsacreations.com/Bases-et-i ... ses-en-CSS (avec en prime une excellente explication sur le positionnement et ce qu'est le "flux"... mais c'est sur que c'est un peu compliqué
En général, il vaut mieux ne pas se fier au rendu d'IE pour savoir ce qui est correct ou pas
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Publié : 18 mai 2007, 15:12
par Lilive
Merci beaucoup !
Content de savoir que je ne faisais pas de bidouillage (sans le savoir !)...
Encore une nouvelle chose apprise.