Discussion :

[KneXtasY]

Bonjour,

Dans mes pages, je créer des blocs comme dans l'exemple suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="box-article">
	<div class="imageleft"><img src="une_image.jpg" alt="" /></div>
	<div class="article">
		BlaBlaBla ....
		<div style="clear: both;"></div>
	</div>
</div>

La feuille de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box-article {
border:1px solid #999999;
margin-bottom:10px;
overflow:auto;	
background: white;
}
 
.article {
padding:10px 10px;
background: white;
}
 
.imageleft{
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}

Le problème vient du fait que quand l'image devient trop grande, il faut "agrandir" le contenant avec un petit clear:both;.

Sous firefox aucun problème tout s'affiche bien, le boite est agrandie, le texte et l'image sont bien là.

Sous IE, le bloc s'agrandit aussi mais le texte "disparait" !
On peut toujours le surligner, mais le texte a pris le couleur du fond ...

Voila, un petit problème bizarre, qui je suis sur est dû à une erreur de ma part (avant j'utilisais la même technique et ça marchait nikel) !

Voila, si vous savez de quoi ça peut venir et surtout si vous connaissez une manière de résoudre ce problème, n'hésitez pas !

Merci d'avance !

[francis m]

je n'ai rien compris, mais

• clear:both n'agrandit rien, il décide simplement que l'on repart dans le flux, ce qui veut dire qu'on ne tient plus compte des instructions précédentes de positionnement float : imageleft se met à gauche et article se met donc à sa droite. quand tu fais clear:both, tu repars à la ligne.

• je dirais d'ailleurs que cette instruction me paraît mal placée : à mon avis, ce "div clear"devrait venir après le "div article" et non dedans

[KneXtasY]

Merci pour tes explications !

En fait avec le code précédent, c'est l'image qui ne s'affichait pas.

je dirais d'ailleurs que cette instruction me paraît mal placée : à mon avis, ce "div clear"devrait venir après le "div article" et non dedans

J'avais déja testé, avec "div clear" aprés "div article" et dans ce cas, le texte disparait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="box-article"> 
   <div class="imageleft"><img src="une_image.jpg" alt="" /></div> 
   <div class="article"> 
      BlaBlaBla .... 
   </div> 
   <div style="clear: both;"></div> 
</div>

Soi j'ai le texte, soi j'ai l'image...
Ce qui explique mieux le titre de ce sujet !

[francis m]

avec ce dernier code, pour moi cela doit fonctionner
n'as-tu pas autre chose comme div avec des float avant ?
as-tu bien mis des balises de paragraphes autour de ton blablabla... ?
pour bien voir les effets, mais un background-color différent dans chacun de tes divs, tu verras mieux
et remplace ton image par un bête texte, tu verras également mieux

[KneXtasY]

Le remplacement de l'image par du texte ne cause pas de problème.

En fait le problème arrive quand l'image est suffisament grande

J'ai mis des couleurs de background différentes pour y voir plus clair.

Voila ce que j'obtiens sous firefox :



Et sur IE :



Dans le dernier cas, le texte disparait mais il est toujours sélectionnable.

[ilood]

J'ai déjà rencontré un problème similaire. Pour le résoudre j'ai du déclaré un width de 100% pour un bloc (box-article dans ton cas).
Mais il faut s'arranger pour que cette propriété ne s'applique qu'à ie.
Ce qui donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
* html div.box-article {
	width: 100%
}

[KneXtasY]

Merci beaucoup !

Ca fonctionne a merveille