Problème de conteneur

**zackrel** · 13/03/2007, 17h26

Bonjour,

j'élabore un site internet en ce moment et je me re trouve face à un problème.
Dans mon css tout les élément de ma pages (banières, menu etc) sont contenu dans une boîte correspondant a la page.

le gros soucis c'est que sous firefox ma boite ne se dimmentionne pas en fonction du contenu, hors je voulais y appliquer une image de fond pour ma page web.

voila ce que ca donne sur firefox, le conteneur globale est en jaune :

et voila le rendu internet explorer qui estnikel bizarement:

voila mon code css :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
body {
	Background-color:white;
	margin:0; /* pour éviter les marges */
    text-align:center; /* pour corriger le bug de centrage IE */
}
 
#page {
	position:relative; /*pour positionner le conteneur */
	background-color:white;
	border-style:solid;
	border-width:5px;
	border-color:yellow;
	margin-left:auto;
    margin-right:auto;
	width:900px;
	text-align:left;
}
 
/************************************************/
/*				Bannière				*/
/************************************************/
 
#banniere{
	position:relative;
	background-color:#ccccff;
	border-style:solid;
	border-width:1px;
	border-color:black;
	margin-left:0px;
    margin-right:auto;
	width:870px;
	height:160px;
	text-align:left;
}
 
/***************************************************************************/
/*	 Menu de la bannière avec liens vers l'accueil, le plan du site et les actualités	*/
/***************************************************************************/
 
#menu_banniere{
	position:relative;
	background-color:white;
	border-style:solid;
	border-width:1px;
	border-color:black;
	margin-left:695px;
	margin-right:10px;	/*La marge externe*/
	top:20px;
	width:160px;
	height:85px;
}
 
/***********************************************************/
/*	Positionnement de la date au dessus du menu de la bannière	*/
/***********************************************************/
#date{
	position:relative;
	margin-left:695px;
	margin-right:10px;
	top:20px;
	text-align:center;
}
 
/************************************************/
/*		  puce du menu dans la bannière		*/
/************************************************/
 
.puce {
	position:relative;
	margin-top:3px;
}
 
/************************************************/
/*	les liens hypertextes dans le menu bannières	*/
/************************************************/
#menu_banniere a:link, a:visited{
	color:#990033;
    text-decoration:none;
    font-weight:normal;
    font-style:normal;
}
#menu_banniere a:hover{
	color:black;
	text-decoration:underline;
}
 
/************************************************/
/*			     Tableau en CSS			*/
/************************************************/
.ligne { 
	clear:both;
	margin-top:2px;
	margin-left:5px;
	padding:2px;
}
.case {
	padding-right:4px;
	float:left;
	text-align:center;
}
 
/************************************************/
/*			     Menu droite			          */
/************************************************/
 
#menu_droite {
	float:left;
	background-color:#ccccff;
	border-style:solid;
	border-width:1px;
	border-color:black;
	margin-left:auto;
    margin-right:auto;
	width:200px;
	height:400px;	/*Temporaire*/
 
}
 
/************************************************/
/*		Boîte pour le contenu de la page		*/
/************************************************/
 
#conteneur {
	float:left;
	background-color:white;
	border-style:solid;
	border-width:1px;
	border-color:black;
	margin-left:auto;
    margin-right:auto;
	width :668px;
	height:400px;	/*Temporaire*/
}
 
/************************************************/
/*				Bas de page				*/
/************************************************/
 
#bas_de_page{
	float:left;
	background-color:#ccccff;
	border-style:solid;
	border-width:1px;
	border-color:black;
	margin-left:auto;
    margin-right:auto;
	width :870px;
	height:30px;

et dans le html :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="page">
		<div id="banniere">
			<div id="date">
				<?php echo laDate();?>
			</div>
			<div id="menu_banniere">
 
				<!-- Menu de la bannière -->
				<div class="ligne">
					<span class="case">
						<img src="../images/puce.jpg" alt="puce" class="puce" />
					</span>
					<span class="case"><a href="./index.php">Accueil</a></span>
				</div>
 
				<div class="ligne">
					<span class="case">
						<img src="../images/puce.jpg" alt="puce" class="puce" />
					</span>
					<span class="case"><a href="./index.php">Actualités</a></span>
				</div>
 
				<div class="ligne">
					<span class="case">
						<img src="../images/puce.jpg" alt="puce" class="puce" />
					</span>
					<span class="case"><a href="./index.php">Plan du site</a></span>
				</div>
 
			</div>
		</div>
		<div id="menu_droite"></div>
		<div id="conteneur">	>> Accueil	</div>
		<div id="bas_de_page"></div>
	</div>

j'aimerai savoir d'ou vient se pb

**MasterOfChakhaL** · 13/03/2007, 17h41

Salut,

A prioiri, c'est firefox qui te montre ce que tu as écris.
En effet, tu utilises des éléments flottants (propriété css float).

Quand tu fais cela, l'élément est sorti du flux, la conséquence est qu'il n'est plus pris en compte par l'élément parent quand celui ci doit déterminer ses dimensions.

Pour régler le souci, il faut que après les éléments flottants et dans le conteneur (la bordure jaune), tu places un élément avec la propriété clear: both. Cet élément reste dans le flux, mais il réagit aux éléments flottants qui le précédent dans le code source. La conséquence est qu'il va "pousser" le bas du parent qui englobera alors tous tes éléments.