Design Probleme avec IE/FF

**Curby** · 14/04/2007, 20h15

Bonjour, je viens de passer un moment sur mon codage et je me rend compte que y a un soucil je vous passe le lien vous regarderez par vous même Liens

Le probleme etant le decalage sur IE le div corps ne veux pas se mettre a droite du menu il se met en dessous

Voila je vous passe aussi les codes html/css
Lien fichier HTML (txt) / Lien fichier CSS (txt)

Merci des reponses

Bonne soirée, Curby

**Candygirl** · 14/04/2007, 20h51

Hello,

Tu as quelques soucis au niveau de tes dimensions:

Code css :

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
#conteneur
{
	width: 775px;
}
 
#menu
{
	width: 187px;
	padding-left: 13px;
}
 
#corps
{
	margin-left: 187px;
	width: 588px;
}

Ton menu a une largeur réelle de 187+13, soit 200 px+588 de corps = un total de 788px, soit plus qu les 775 déclaré pour ton conteneur. IE considère donc qu'il n'a pas la place de mettre les 2 éléments côtes à côtes.

Ensuite, si tu ne souhaites pas être confronté au bug des 3px sur IE6, vu ton design de taille fixe, je te conseille plutôt de positionner ton corps en float plutôt qu'avec une marge gauche de la largeur du menu:

Code css :

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

1
2
3
4
5
#corps
{
        float:right;
	width: 575px;
}

**Curby** · 14/04/2007, 21h09

Merci je vais essayer les dimensions ^^

**Curby** · 14/04/2007, 21h23

Voila ca marche je te remercie maintenant j'ai plus qu' a me mettre au finissage :p

**Curby** · 14/04/2007, 21h30

Rebonjour, J'ai un autre souci ^^

J'ai decider de fais un conteneur ( vous allez comprendre ) pour que le fond sois a niveau.

Lien

Mais lorsque je l'ouvre sous FF tout va mal le fond ne s'affiche pas pourquoi ôÔ?

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr-FR" />
<title>Bienvenue sur Miru Rakuen !</title>
<link rel="stylesheet" media="screen" type="text/css" href="design.css" /> 
</head>
	<body>
			<div id="header"><div class="barre">.Inscription .Connexion</div></div>
		<div id="conteneur">
			<div id="menu">
				<img class="margin" src="img/navigation.gif"><br>
					<div class="liens">- News<br>- Membres<br>- Staff<br>- Forum<br>- Projet<br>- FAQ</div>
				<img class="margin" src="img/media.gif"><br>
					<div class="liens">- Episodes<br>- Osts<br>- Articles<br>- Scans<br>- Wallpapers<br></div>
				<img class="margin" src="img/stat.gif"><br>
					<div class="stat">
						 <img src="img/puce.gif"> <span>xxx</span> Visites<br>
						 <img src="img/puce.gif"> <span>xxx</span> Aujourd'hui<br>
						 <img src="img/puce.gif"> <span>xxx</span> Connectés<br>
						 <img src="img/puce.gif"> <span>xxx</span> Membres<br><br>
					     <img src="img/puce.gif"> <span>xx</span> Series  <br>
						 <img src="img/puce.gif"> <span>xx</span> Episodes<br>
						 <img src="img/puce.gif"> <span>xx</span> Articles<br>
						 <img src="img/puce.gif"> <span>xx</span> Scans<br>
						 <img src="img/puce.gif"> <span>xx</span> OAVs<br>
					     <img src="img/puce.gif"> <span>xx</span> OSTs<br>
						 <img src="img/puce.gif"> <span>=> xx</span> Go<br>
					</div>
			</div>
			<div id="corps">		
 
 
			xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
 
 
 
 
 
 
			</div>
		</div>
	</body>
</html>

Code css :

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
body
{
   width: 775px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 10px; 
}
/*----------------------------- Conteneur --------------------------------------*/
 
#conteneur
{
	width: 775px;
	margin: auto;
	background-image: url("img/backbody.gif");
	background-repeat: repeat-y;
}
 
/*----------------------------- Header --------------------------------------*/
#header
{
   margin: auto;
   width: 775px;
   height: 220px;
   background-image: url("img/header.png");
}
.barre
{
	padding-top: 202px;
	padding-right: 5px;
	text-align: right;
	font-size: 11px;
	font-family: "Verdana";
	font-weight: bold;
}
/*----------------------------- Menu --------------------------------------*/
#menu
{
	overflow: auto;
	float: left;
	width: 187px;
 
	padding-top: 10px;
 
}
.liens
{
	padding-left: 33px;
	color: #676ac7;
	font-size: 11px;
	font-family: "Verdana";
}
.margin
{
	padding-left: 13px;
	padding-top: 10px;
}
.stat
{
 
	width: 140px;
	margin-top: 5px;
	margin-left: 23px;
	margin-right:0px;
	background-color: #f5f1fd;
	border: 1px dashed #9798d6;
	color: #5258c1;
	font-size: 11px;
	font-family: "Verdana";
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.stat span
{
	color: #000000;
	font-size: 11px;
	font-family: "Verdana";
}
 
/*----------------------------- Corps --------------------------------------*/
 
#corps
{
	float: left;
	HEIGHT: 0px;
	width: 588px;
	padding-top: 10px;
 
 
}

Voila les codes originaux

**Candygirl** · 14/04/2007, 23h12

A cause des flottants. Pour que le conteneur prennent en compte les flottants et descende jusqu'au bas, tu dois créer un nouveau contexte de formatage, par exemple avec un overflow:

Code css :

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

1
2
3
4
5
6
7
8
9
 
#conteneur
{
	width: 775px;
        overflow:auto;
	margin: auto;
	background-image: url("img/backbody.gif");
	background-repeat: repeat-y;
}

**Curby** · 14/04/2007, 23h35

Merci, je met resolu j'enleverrais si j'ai encore besoins de toi ^^ Merci beaucoup

**Curby** · 15/04/2007, 12h56

Bonjour, j'ai encore un soucil ^^ alors encore sous FF, vous allez comprendre en regardant ^^

Lien

Les codes ( html / css )

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr-FR" />
<title>Bienvenue sur Miru Rakuen !</title>
<link rel="stylesheet" media="screen" type="text/css" href="design.css" /> 
</head>
	<body>
			<div id="header"><div class="barre">.Inscription .Connexion</div></div>
		<div id="conteneur">
			<div id="menu">
				<img class="margin" src="img/navigation.gif"><br>
					<div class="liens">- News<br>- Membres<br>- Staff<br>- Forum<br>- Projet<br>- FAQ</div>
				<img class="margin" src="img/media.gif"><br>
					<div class="liens">- Episodes<br>- Osts<br>- Articles<br>- Scans<br>- Wallpapers<br></div>
				<img class="margin" src="img/stat.gif"><br>
					<div class="stat">
						 <img src="img/puce.gif"> <span>xxx</span> Visites<br>
						 <img src="img/puce.gif"> <span>xxx</span> Aujourd'hui<br>
						 <img src="img/puce.gif"> <span>xxx</span> Connectés<br>
						 <img src="img/puce.gif"> <span>xxx</span> Membres<br><br>
					     <img src="img/puce.gif"> <span>xx</span> Series  <br>
						 <img src="img/puce.gif"> <span>xx</span> Episodes<br>
						 <img src="img/puce.gif"> <span>xx</span> Articles<br>
						 <img src="img/puce.gif"> <span>xx</span> Scans<br>
						 <img src="img/puce.gif"> <span>xx</span> OAVs<br>
					     <img src="img/puce.gif"> <span>xx</span> OSTs<br>
						 <img src="img/puce.gif"> <span>=> xx</span> Go<br>
					</div>
			</div>
	<div id="corps">		
 
		<div id="contenue">
 
			<div class="top_corps"></div>
			<div class="titre">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
				<div class="bg_corps">
 
					<div id="content">
						<div class="top_content"></div>
							<div class="bg_content">
								xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
							</div>
						<div class="bottom_content"></div>
					</div>
 
				</div>
			<div class="bottom_corps"></div>
		</div>
	</div>
 
		<div id="corps">		
 
		<div id="contenue">
 
			<div class="top_corps"></div>
			<div class="titre">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
				<div class="bg_corps">
 
					<div id="news">
						<div class="avatar"><img src="img/curby.png"></div>
						<div class="top_news"></div>
							<div class="bg_news">
								xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
							</div>
						<div class="bottom_news"></div>
					</div>
 
				</div>
			<div class="bottom_corps"></div>
		</div>
	</div>
 
 
 
 
 
 
 
 
 
			</div>
		</div>
	</body>
</html>

Code css :

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
body
{
   width: 775px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 10px; 
}
/*----------------------------- Conteneur --------------------------------------*/
 
#conteneur
{
	overflow:auto;
	width: 775px;
	margin: auto;
	background-image: url("img/backbody.gif");
	background-repeat: repeat-y;
}
 
/*----------------------------- Header --------------------------------------*/
#header
{
   margin: auto;
   width: 775px;
   height: 220px;
   background-image: url("img/header.png");
}
.barre
{
	padding-top: 202px;
	padding-right: 5px;
	text-align: right;
	font-size: 11px;
	font-family: "Verdana";
	font-weight: bold;
}
/*----------------------------- Menu --------------------------------------*/
#menu
{
	overflow: auto;
	float: left;
	width: 187px;
 
	padding-top: 10px;
 
}
.liens
{
	padding-left: 33px;
	color: #676ac7;
	font-size: 11px;
	font-family: "Verdana";
}
.margin
{
	padding-left: 13px;
	padding-top: 10px;
}
.stat
{
 
	width: 140px;
	margin-top: 5px;
	margin-left: 23px;
	margin-right:0px;
	background-color: #f5f1fd;
	border: 1px dashed #9798d6;
	color: #5258c1;
	font-size: 11px;
	font-family: "Verdana";
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.stat span
{
	color: #000000;
	font-size: 11px;
	font-family: "Verdana";
}
 
/*----------------------------- Corps --------------------------------------*/
 
#corps
{
	float: left;
	width: 588px;
	padding-top: 10px;
}
/*----------------------------- Contenue --------------------------------------*/
#contenue
{
	width: 542px;
	margin-top: 5px;
	margin-left: 23px;
	margin-right: 23px;
}
.top_corps
{
	width: 542px;
	height: 10px;
	background-image: url("img/topcorps.gif");
}
.titre
{
	width: 542px;
	height: 17px;
	background-image: url("img/titrecorps.gif");
	background-repeat: no-repeat;
   	text-align: left;
	font-size: 10px;
	font-family: "Verdana";
	padding-left: 15px;
	padding-top: 4px;
}
.bg_corps
{
	width: 542px;
	background-image: url("img/bgcorps.gif");
	background-repeat: repeat-y;
}
.bottom_corps
{
	width: 542px;
	height: 10px;
	background-image: url("img/bottomcorps.gif");
}
#content
{
	width: 527px;
	padding-top: 3px;
	margin-left: 7px;
	margin-right: 7px;
}
.top_content
{
 
	width: 527px;
	height: 10px;
	background-image: url("img/topcontent.gif");
}
.bg_content
{
	width: 527px;
	background-image: url("img/bgcontent.gif");
	background-repeat: repeat-y;
	font-family: "Verdana";
	padding-left: 15px;
	padding-top: 4px;
	font-size: 12px;
 
}
.bottom_content
{
	width: 527px;
	height: 10px;
	background-image: url("img/bottomcontent.gif");
}
#news
{
	width: 527px;
	padding-top: 3px;
	margin-left: 7px;
	margin-right: 7px;
}
.avatar
{
	float: left;
	width: 90px;
	height: 100px;
}
.top_news
{
	float: right;
	width: 419px;
	height: 10px;
	background-image: url("img/topnews.gif");
}
.bg_news
{
	float: right;
	width: 419px;
	background-image: url("img/bgnews.gif");
	background-repeat: repeat-y;
	font-family: "Verdana";
	font-size: 12px;
 
}
.bottom_news
{
	float: right;
	width: 419px;
	height: 10px;
	background-image: url("img/bottomnews.gif");
}

Merci bonne journée

**Candygirl** · 15/04/2007, 13h44

Il me semble que c'est exactement le même problème que ci-dessus., donc tu peux appliquer la même solution.

Autrement je te conseille de revoir un peu ton balisage et utiliser les balises appropriées (h1,h2,...,p,...) plustôt que seulement des div.

**Curby** · 15/04/2007, 13h48

Merci, je pense que tu me parlais du "overflow:auto;" mais la sa marche mais me fais apparaitre des barres de navigation :s

**Candygirl** · 15/04/2007, 14h02

C'est que tu as du définir des dimensions trop grandes pour le conteneur. Tu peux aussi utiliser le overflow:hidden, mais si tes dimensions sont trop grandes, tu verras disparaître un bout de ton texte.

D'autre part, un id doit être unique sur la page.

**Curby** · 15/04/2007, 15h13

J'ai resolue mon probleme j'ai fais 2 bg_corps different 1 pour le content et l'autre pour les news ^^. Pour l'instant tout va bien a bientot surement xD.

**Curby** · 15/04/2007, 18h40

Un nouveau probleme :s :

Quand le block de droite depasse celui de gauche en hauteur il se place en dessous du block de gauche ( que sur IE )

Liens

Code css :

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
body
{
   width: 775px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 10px; 
}
/*----------------------------- Conteneur --------------------------------------*/
 
#conteneur
{
	overflow:auto;
	width: 775px;
	margin: auto;
	background-image: url("img/backbody.gif");
	background-repeat: repeat-y;
}
 
/*----------------------------- Header --------------------------------------*/
#header
{
   margin: auto;
   width: 775px;
   height: 220px;
   background-image: url("img/header.png");
}
.barre
{
	padding-top: 202px;
	padding-right: 5px;
	text-align: right;
	font-size: 11px;
	font-family: "Verdana";
	font-weight: bold;
}
/*----------------------------- Menu --------------------------------------*/
#menu
{
	overflow: auto;
	float: left;
	width: 187px;
 
	padding-top: 10px;
 
}
.liens
{
	padding-left: 33px;
	color: #676ac7;
	font-size: 11px;
	font-family: "Verdana";
}
.margin
{
	padding-left: 13px;
	padding-top: 10px;
}
.stat
{
 
	width: 140px;
	margin-top: 5px;
	margin-left: 23px;
	margin-right:0px;
	background-color: #f5f1fd;
	border: 1px dashed #9798d6;
	color: #5258c1;
	font-size: 11px;
	font-family: "Verdana";
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.stat span
{
	color: #000000;
	font-size: 11px;
	font-family: "Verdana";
}
 
/*----------------------------- Corps --------------------------------------*/
 
#corps
{
	float: left;
	width: 588px;
	padding-top: 10px;
}
/*----------------------------- Contenue --------------------------------------*/
#contenue
{
	float: right;
	width: 542px;
	margin-top: 5px;
	margin-left: 23px;
	margin-right: 21px;
 
}
.top_corps
{
	margin-top:5px;
	width: 542px;
	height: 10px;
	background-image: url("img/topcorps.gif");
}
.titre
{
	width: 542px;
	height: 17px;
	background-image: url("img/titrecorps.gif");
	background-repeat: no-repeat;
   	text-align: left;
	font-size: 10px;
	font-family: "Verdana";
	padding-left: 15px;
	padding-top: 4px;
}
.bg_corps_content
{
 
	width: 542px;
	background-image: url("img/bgcorps.gif");
	background-repeat: repeat-y;
}
.bg_corps_news
{
	overflow:hidden;
	width: 542px;
	background-image: url("img/bgcorps.gif");
	background-repeat: repeat-y;
}
.bottom_corps
{
	width: 542px;
	height: 10px;
	background-image: url("img/bottomcorps.gif");
}
#content
{
	width: 542px;
	padding-top: 3px;
}
.top_content
{
	width: 542px;
	height: 10px;
	background-image: url("img/topcontent.gif");
	background-repeat: no-repeat;
}
.bg_content
{
 
	width: 542px;
	background-image: url("img/bgcontent.gif");
	background-repeat: repeat-y;
 
	padding-left: 15px;
	padding-top: 4px;
 
}
.read_content
{
	font-family: "Verdana";
	font-size: 12px;
	padding-right: 18px;
 
}
.bottom_content
{
	width: 542px;
	height: 10px;
	background-image: url("img/bottomcontent.gif");
}
/*----------------------------- News --------------------------------------*/
#news
{
	width: 527px;
	padding-top: 3px;
	margin-left: 7px;
	margin-right: 7px;
}
.avatar
{
	float: left;
	width: 100px;
	text-align:center;
	margin-left: 5px;
}
.top_news
{
	float: right;
	width: 419px;
	height: 10px;
	background-image: url("img/topnews.gif");
}
.bg_news
{
	float: right;
	width: 419px;
	background-image: url("img/bgnews.gif");
	background-repeat: repeat-y;
	font-family: "Verdana";
	font-size: 12px;
}
.read_news
{
	font-family: "Verdana";
	font-size: 12px;
	padding-left: 5px;
	padding-right: 5px;
}
.bottom_news
{
	float: right;
	width: 419px;
	height: 10px;
	background-image: url("img/bottomnews.gif");
}
.by
{
	text-align: right;
	font-family: "Verdana";
	font-size: 11px;
	float: right;
	width: 419px;
	margin-right: 0px;
	padding-top: 5px;
}
/*----------------------------- Footer --------------------------------------*/
#footer
{
   margin: auto;
   width: 775px;
   height: 20px;
   background-image: url("img/footer.gif");
 
}

Merci et encore désolé pour les derangements

**Curby** · 15/04/2007, 20h17

Resolue

Overflow le mettre en Hidden :s

Bonne soirée

Design Probleme avec IE/FF

CSS

Discussions similaires

Partager

Partager