18041 sujets

Questions générales et questions de débutants

[RESOLU] Bug FF

bonjours à tous

je suis devant un Bug sous FireFox
le background-color du DIV "contener" ne s'affiche pas

j'ai oublié quelque chose ?

<body>
<div id="contener"> 
  <div id="banniere"></div>
  <div id="gauche"></div>
  <div id="droit"></div>
  <div id="basdepage"></div>
</div>
</body>


html, body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	background-color: #CCCCCC;
}
#contener {
	margin: 0px 0px 0px -300px;
	padding: 0px;
	left: 50%;
	top: 0px;
	height: 100%;
	width: 600px;
	background-color: #FFFFFF;
	position: relative;
}
#banniere {
	margin: 0px;
	padding: 0px;
	height: 300px;
	width: 600px;
	background-color: #0066CC;
}
#gauche {
	width: 140px;
	height: 100%;
	margin: 0px;
	padding: 20px;
	float: left;
}
#droit {
	height: 100%;
	overflow: auto;
	width: 380px;
	padding: 20px;
	margin: 0px;
	float: right;
}
#basdepage {
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 600px;
	background-color: #0066CC;
	float: left;
}


Smiley biggrin Merci de m'aider parceque là je comprend pas trop Smiley sweatdrop
Modifié par olimann (15 Jun 2007 - 15:51)
Salut olimann,

heu, c'est bien de donner ton code, mais ça serait bien aussi d'énoncer quel est ton problème, enfin à quel bug es-tu confronté. Est-ce que c'est un bug d'affichage, un bug de comportement, etc... ? Smiley cligne
Je sais pas ou est ton problème, mais moi j'aurai plutot tendance à organiser les DIV dans l'ordre d'affichage.

<div id="banniere"></div>
<div id="gauche"></div>
<div id="contener"></div>
<div id="droit"></div>
<div id="basdepage"></div>

De plus ton DIV id=contener est à -300 pixel à gauche, ne sortirai-il pas de l'écran par hasard?

Pour avoir utiliser une structure de ce type sur un site que je tricote en ce moment, j'ai constater que IE et FireFox n'interprètent pas les DIV de la même façon, mais je suis aussi une débutante.
Salut olimann,

Avec le code que tu donnes, tout fonctionne comme attendu, ce n'est pas un bug de Firefox. D'ailleurs pourquoi parles-tu seulement de Firefox ? Tous les navigateurs affichent ta page de la même manière Smiley murf .

Enfin, bref, une petite explication :
- la propriété {height:100%} de #contener ne vaut rien si le parent (ici body) n'a pas lui-même de hauteur définie. Donc elle n'est pas appliquée.
-la hauteur de #contener n'étant pas définie, elle sera celle du plus haut de ses enfants restés dans le flux : div#bannière (tu as flotté tous les autres).

(même raisonnement pour la largeur)

Conclusion : #banniere occupe toute la place dans #contener et tu ne vois que son background, pas celui de sa môman. Ce dernier est derrière, certes, mais il est bien là ! Enlève la propriété de background de #bannière et tu verras le background de #contener tant désiré Smiley smile
Modifié par marcv (15 Jun 2007 - 07:55)
Sujet clos
Aller à