28219 sujets

CSS et mise en forme, CSS3

Mon div de fond ne s'affiche pas

Bonjour,

J'ai fait un tour sur les différents tutos et faq mais je n'arrive pas à comprendre pourquoi mon div qui englobe plusieurs autres div ne s'affiche pas sur Mozilla.

Je me permets de coller mon code, si quelqu'un à une idée....:

<style type="text/css" media="screen"><!--

#grande_boite {
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 14px;
background-color: #d5d5de;
text-align: left;
visibility:visible;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
position: relative;
width: 650px;

}
#boite1
{
background-color: #f6f6b8;
position: relative;
padding: 10px;
margin-top: 10px;
width: 25%;
float: left
}

#boite2
{
background-color: #c9ebe3;
position: relative;
padding: 10px;
margin-top: 10px;
width: 40%;
float: left;
margin-left: 10px;
margin-bottom: 10px;
line-height: 16px
}

#boite3
{
background-color: #f6c3f6;
position: relative;
padding: 10px;
margin-top: 10px;
width: 20%;
margin-left: 10px;
float: left
}



--></style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>

</head>

<body>
<div id="grande_boite">
<div id="boite1">boite1</div>
<div id="boite2">boite2</div>
<div id="boite3">boite3</div>
</div>
</body>
</html>
Salut,
Déja commence par insérer ton code dans les balises code reservées à cet effet (bouton code).
Modifié par Hermann (23 Jan 2006 - 14:54)
ok, merci pour l'info :
<style type="text/css" media="screen"><!--

#grande_boite {	
font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	line-height: 14px;
	background-color: #d5d5de;
	text-align: left;
	visibility:visible;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 650px;
		
	}
#boite1
	{
	background-color: #f6f6b8;
	position: relative;
	padding: 10px;
	margin-top: 10px;
	width: 25%;
	float: left
	}

#boite2
	{
	background-color: #c9ebe3;
	position: relative;
	padding: 10px;
	margin-top: 10px;
	width: 40%;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
	line-height: 16px
	}

#boite3
	{
	background-color: #f6c3f6;
	position: relative;
	padding: 10px;
	margin-top: 10px;
	width: 20%;
	margin-left: 10px;
	float: left
	}



--></style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>

</head>

<body>
<div id="grande_boite">
<div id="boite1">boite1</div>
<div id="boite2">boite2</div>
<div id="boite3">boite3</div>
</div>
</body>
</html>
Salut !

Si tu change ton position en absolute plutôt que relative ça fonctionne.

#grande_boite
{
	position: absolute;
	width: 650px;
	height : 1px;
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, "sans-serif";
	background-color: #d5d5de;
	text-align: left;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
}
Remarque n°1 : plutôt que de copier-coller ton code, tu aurais pu simplement éditer ton premier message pour rajouter les balises [ code] et [/ code]... tu peux d'ailleurs toujours le faire (éditer le premier message pour rajouter ces balises, et ensuite supprimer le deuxième message...).

Remarque n°2 : ce n'est pas directement lié à ton problème, mais ton code CSS est loin d'être optimisé. Par exemple, chaque bloc y est en display: relative, ce qui ne te sers à rien vu que tu n'utilises pas ce mode de positionnement pour décaler les blocs. Tu peux donc supprimer ces propriétés de ta CSS.

Maintenant, le problème qui nous intéresse.
webdeb73 a trouvé un "truc" avec utilisation d'un positionnement en absolu pour forcer la div #grande_boite à s'afficher. Très bien, très bien. Sauf que le positionnement absolu n'est pas anodin, et qu'il fait sortir l'élément du flux du document, ce qui peut être génant pour une mise en page. Il faut donc bien faire attention en l'utilisant. Dans le cas présent, le positionnement en absolu annule le centrage horizontal du bloc (obtenu à l'aide des margin: auto;), du coup le bloc se retrouve aligné à gauche.

De plus, la solution de webdeb73 n'explique pas les raisons du problème constaté. Heuseusement que je suis là Smiley lol

Le problème rencontré vient du fait que tous les éléments enfants de ton bloc sont flottés : les navigateurs qui respectent plus ou moins les spécifications CSS considèrent alors que ces éléments enfants "sortent" du flux de l'élément parent. Du coup, l'élément parent (ta div #grande_boite) ne s'allonge pas pour venir englobber ces éléments flottés.

Si tu rajoutes ceci à ton CSS pour la div #grande_boite
min-height: 20px;
border: solid 1px black;

tu pourras constater avec ces navigateurs (pour ma part je viens de faire le test avec Firefox, Konqueror et Opera) que tes différentes "boites" sortent du bloc conteneur. Ta div #grande_boite est bien rendue par ces navigateurs, mais comme elle n'a aucun contenu autre que des éléments flottés qui sortent du flux du conteneur, elle a une hauteur de 0 pixels. Mais dès qu'on lui attribue une hauteur minimale, on la voit apparaître.

Solution rapide et pas prise de tête ?
On va forcer les éléments flottés à être pris en compte comme éléments du flux du bloc conteneur (div #grande_boite) en utilisant un élément doté de la propriété CSS clear. Ce qui donne, pour le code html :
<div id="grande_boite">
	<div id="boite1">boite1</div>
	<div id="boite2">boite2</div>
	<div id="boite3">boite3</div>
	<div style="clear: both;" />
</div>

Et le tour est joué !
Pour le CSS, rien à modifier. Si ce n'est supprimer tous ces display: relative; (ou display: absolute;) qui ne servent à rien, et qui risquent d'être source de problèmes Smiley biggol
Bonsoir,

mpop a écrit :

...
	<div style="clear: both;" />
</div>


Mais pourquoi faut-il que je sois toujours obligé de jouer les casse-pieds de service ? Smiley lol

div n'est pas un élément EMPTY (c'est à dire vide par définition) et ne doit pas s'écrire de cette manière quand il n'a pas de contenu. Cette syntaxe est déconseillée par les spécifications XHTML1.0 et XML1.0, pour des raisons de compatibilité avec divers navigateurs. On écrit au minimum:

<div style="clear: both;"></div>


Voir <p></p> ou <p /> ? <br /> ou <br></br> ? Lisez les specs
Modifié par Laurent Denis (23 Jan 2006 - 17:54)
mpop a écrit :

<div style="clear: both;" />


Salut Mpop,

Solution qui ne marche pas du tout avec Netscape.
J'avais déjà fait un test et la seule solution que j'avais trouvé était d'ajouter une micro hauteur, du style 0.1px ( Smiley ohwell ), et un "overflow: hidden" pour ne pas qu'IE ajoute d'espace.. (on pourrait éviter en choisissant la propriété min-height, mais on peut toujours esperer qu'IE 7 l'implémente, ce qui pourrait alors poser problème)
.spacer {
	clear: both;
	height: 0.1px;
	overflow: hidden;	
}

<div class="spacer"> </div>

Comme cela, ça marche avec tous les navigateurs.
Dans le cas de Roulian, un simple attribut <br /> avec la propriété "clear" suffit, mais d'après mes essais ce n'est pas toujours le cas.

<hr /> est souvent utilisé mais j'vous souhaite du courage pour supprimer totalement l'espace qu'il créé sur IE Smiley langue

Alain

(j'viens d'éditer mon message suite à la remarque de Laurent Denis)
Modifié par Alan (23 Jan 2006 - 18:07)
Sujet clos
Aller à