Image flottante et <div>

Version imprimable

04/07/2005, 23h57
KneXtasY

Image flottante et <div>

Bonsoir,

Je réalise un petit site et je suis confronté a un problème d'affichage sous IE.

J'ai une image flottante avant une div.

Si l'image est plus grande que la div, l'image empiète sur l'espace dans dessous. :furax:
Alors que sous Firefox, la div se redimensionne pour passer en dessous de l'image.

Est ce normal ?
Y a t-il un moyen pour y remédier ?

Merci ! :D
05/07/2005, 08h33
guignol

Je ne connais pas trop le terme "image flottante", mais j'imagine à quoi cela correspond.

Si tu utilises une balise <img> pour ton image, tu rajoute les attributs width et height qui fixeront la taille de ton image.
05/07/2005, 10h23
ilood

Salut,

Normalement un élèment positionné en float sort du flux normal. donc il est normal que l'image "sorte" du div. Etonnant que sous Firefox tout se passe bien.
Tu pourrais poster le morceau de code html et css qui pose problème ?
05/07/2005, 10h37
giminik

si tu veux annuler le flottement regarde la propriété http://www.w3.org/TR/CSS21/visuren.html#propdef-clear
mais c'est vrai qu'un bout de code ne serait pas de refus...

Je vous remercie.

Pour les curieux voila le code :

Code:

1
2
3
4
5
6
7
8
9
<div class="box-article">
	<div class="top-bottom">
		<b>Le titre</b>
	</div>
	<div style="float:left;"><img src="./images/image.jpg" alt=""></div>
	<div class="article">
		Le texte .........
	</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box-article {
border:1px solid #eeeeee;
margin-bottom:20px;
overflow:auto;
font-size : 80%;
}
 
.top-bottom {
background-color:#eeeeee;
padding:2px 0px 2px 10px;
border-bottom : 1px dashed #003399;
color : #003399;
background-image: url("../images/bg_title.gif")
}
 
.article {
padding:10px 10px;
background: white;
}

Code:

1 2 3 4 5 6 7 8 9 10 11 <div class="box-article"> <div class="top-bottom"> <b>Le titre</b> </div> <div style="float:left;"><img src="./images/image.jpg" alt=""></div> <div class="article"> Le texte ......... </div>  <div style="clear: both"></div> </div>
Il semblerait que le div se redimensionne sous firefox grâve au oveflow: auto;
Comme le proposait giminik, il faut annuler le flottement. On utilise une balise avec la propriété clear: both;

J'ai mis le style dans le html, mais rien ne t'empeche de créer une classe dans ta feuille de style.

05/07/2005, 17h32
KneXtasY

Merci beaucoup ça marche super ! 8)
C'est une astuce que je n'oublirais pas.