28173 sujets

CSS et mise en forme, CSS3

[Résolu] Espace indésirable à cause d'un clear:left

Bonjour,

Plutôt que passer de nombreuses à vous expliquer ce le problème, voici deux illustrations.

Ce que ça devrait donner :
http://bougetoi.com/autres/pb_clear1.jpg

Ce que ça donne ... :
http://bougetoi.com/autres/pb_clear2.jpg

Voici le code html :

<div class="cadre_gris" id="cadre_concept">
					<div class="coin_hg"></div>
					<div class="coin_hd"></div>
					<div class="content">
					
						<img src="img/secretaire_tel.jpg" width="139" height="161" alt="" />
						<p>Pellentesque sagittis condimentum dui. Donec interdum, turpis nec gravida condimentum, risus orci faucibus arcu, in semper velit velit dapibus risus.<br /> 
 <br /> 
Integer at justo vitae lectus nonummy tempus. Quisque justo. Suspendisse potenti. Vivamus tincidunt, augue faucibus euismod varius, pede massa elementum arcu, vitae congue metus turpis vitae nulla. Morbi massa nibh, fringilla </p>
<br style="clear:left" /> <strong><-- après mon br clear:left</strong>
</div>	
					<div class="coin_bg"></div>
					<div class="coin_bd"></div>	
					
				</div>


et le css correspondant :


.cadre_gris { 
	position: relative; 
	background-color: #ece8e6; 
}
.cadre_gris .coin_hg, .cadre_gris .coin_hd, .cadre_gris .coin_bg, .cadre_gris .coin_bd { 
	height: 9px; 
	width: 9px; 
	background-repeat: no-repeat; 
	position: absolute; 
}
.cadre_gris .coin_hg { 
	top: 0px; 
	left: 0px; 
	background-image: url(../img/cadreg_hg.png); 
	z-index: 4;
}
.cadre_gris .coin_hd {
	top: 0px; 
	right: 0px; 
	background-image: url(../img/cadreg_hd.png); 
	z-index: 1;
}
.cadre_gris .coin_bg { 
	bottom: 0px; 
	left: 0px; 
	background-image: url(../img/cadreg_bg.png); 
	z-index: 2;
}
.cadre_gris .coin_bd { 
	bottom: 0px; 
	right: 0px; 
	background-image: url(../img/cadreg_bd.png); 
	z-index: 3;
}
.cadre_gris .content { 
	position: relative;  
	z-index: 0;
	background: #f5f1f0; 
	border:9px solid  #ece8e6; 	
}
.cadre_gris .content p { 
	padding:0;
	margin: 5px;	
}
#cadre_concept {
	width: 410px;
	margin-left: 8px;
	color: #838383;
	font-size: 11px;
}
#cadre_concept .content img {
	float:left;
	border: 1px solid #d6d2d1;
	margin-right: 2px;
}


Voila donc en gros le principe c'est que je dois avoir à l'intérieur de mon cadre une photo à gauche et un texte flottant à droite.
Afin que le cadre s'agrandisse au minimum à la taille de la photo je fais un clear:left à la suite du texte. Le problème c'est que celui-ci me créé un espace bizarre en plus sous la photo.

Voici la page en ligne : http://bougetoi.com/champs/

Quelqu'un aurait t'il un explication svp ? Smiley confus
Modifié par albataur (15 Apr 2007 - 15:37)
Bonjour,

Alors je te dirai comme on m'a dit ya 2 jours. As-tu essayé un min-height plutot qu'un clear:left ?? Ca va te permettre de définir une hauteur minimum par exemple de la taille de ton image et ton cadre s'agrandira ensuite selon son contenu.

Tu peux aussi définir un padding à l'intérieur de ton cadre pour éviter d'etre collé au bord et éventuellement alignement justifié pour ton texte.
Modifié par Klesk (14 Apr 2007 - 15:58)
Merci pour ta réponse.

Klesk a écrit :
Bonjour,

Alors je te dirai comme on m'a dit ya 2 jours. As-tu essayé un min-height plutot qu'un clear:left ?? Ca va te permettre de définir une hauteur minimum par exemple de la taille de ton image et ton cadre s'agrandira ensuite selon son contenu.


Oui mais ça implique de définir en dur dans le css la hauteur, ce qu'à priori je ne souhaite pas étant donné que l'image doit pouvoir être changée sans que l'on ai besoin de modifier le css.
De plus min-height n'est pas pris en charge par IE (même s'il exista pas mal de hacks assez efficaces pour contourner le problème).

Klesk a écrit :

Tu peux aussi définir un padding à l'intérieur de ton cadre pour éviter d'etre collé au bord et éventuellement alignement justifié pour ton texte.

Le padding c'est pareil je préfère éviter au maximum étant donné que c'est mal pris en charge par ie.
Mais dans tous les cas cela ne va pas corriger mon problème ?

Pour info voici le résultat si j'enlève le clear:left :
http://bougetoi.com/autres/pb_clear3.jpg
Essai un min-height de la hauteur de la photo pour voir. Le fait de définir en dur dans le css une hauteur minimale n'implique pas par la suite que tu sois obligé de le rechanger à partir du moment ou ton image fait toujours ce minimum que tu as défini.
Modifié par Klesk (14 Apr 2007 - 17:15)
Klesk a écrit :
Essai un min-height de la hauteur de la photo pour voir. Le fait de définir en dur dans le css une hauteur minimale n'implique pas par la suite que tu sois obligé de le rechanger à partir du moment ou ton image fait toujours ce minimum que tu as défini.

Oui mais justement je ne veux pas imposer de hauteur.
Bon pour le moment c'est ce que j'ai fait à défaut d'avoir une meilleure solution. Mais ça m'intèresserait quand même de savoir d'où vient cet espace Smiley hum
Bonjour,

Sans clear: left sur un <br /> qui ma foi joue sont rôle normalement, essaye 
.cadre_gris .content { 

	position: relative;  
	overflow: hidden;
	z-index: 0;
	background: #f5f1f0; 
	border:9px solid  #ece8e6; 	
}


Qui devrait normalement te tirer d'affaire sauf peut être sous ie 6, je regarde

<edit> pour ie6 rajouter le fameux height: 1%; </edit>
Modifié par ghost (14 Apr 2007 - 18:26)
Merci bien ! Ca semble parfaitement fonctionner.

Tu as l'air de dire que le comportement est tout à faire normal ("sur un <br /> qui ma foi joue sont rôle normalement"), pourrais-tu m'apporter quelques explications supplémentaires ?
Bonjour,
tu es dans un cas de contexte de formatage bloc :
En plus de s'appliquer au texte précédent le dégagement (clear) s'applique aussi aux autres flottants plus en amont dans le code (en l'occurence, ton menu de gauche).
La solution de l'overflow proposée par Ghost est la plus simple puisqu'en plus de créer un contexte
de formatage, l'overflow permet aussi d'étendre la taille du conteneur à ses
enfants flottant.
Le height: 1% (zoom:1 aussi) est une des propriétés conférant le layout
à un élément. Elle doit être insérée dans une feuille de style via
commentaires conditionnels (voir la FAQ)

Mis appart ça, la propriété clear ne s'applique qu'aux des éléments de type
bloc (div, Hn, hr, p, ul...)
Dans ton cas il aurait fallu ajouter un <hr /> et non un <br /> (ne devrait
servir qu'à forcer une coupure de ligne).
Attention a ne pas oublier la barre oblique (<br />)
Modifié par Hermann (15 Apr 2007 - 04:43)
Sujet clos
Aller à