Affichage incohérent sous IE par rapport a firefox

**nO_life** · 14/12/2008, 22h12

Bonjour a tous,
J'ai un beug sous Internet explorer qui n'apparaît pas sous Firefox cela ce trouve tout en bas du design.
voici le lien du design : http://promos-mails.com/demoettest/index.html

PS: un ami me dit que sur son ordinateur apparaît plusieurs beug alors que chez moi je recense que celui du bas du design.

C'est ma première découpe soyez indulgent

toute critiques et amélioration possible sera prise en comptes merci a tous ce qui viendront m'aider a ce sujet.

Voici le code 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
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
<!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="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webmedia</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
 <div id="header"> </div>
 <div class="recherche"><form action="http://liens.com" method="post" ></form></div>
 <div class="bouton"><a href="http://liens.com"></a> </div>
 <!-- menu haut -->
 <div class="menuhaut">
   <div id="menuhautboutongauche" class="boutonsmenuhaut"><a href="http://liens.com">1g</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">2c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">3c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">4c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">5c</a></div>
   <div id="menuhautboutondroit" class="boutonsmenuhaut"><a href="http://liens.com">6d</a></div>
 </div>
 <!-- fin du menu haut -->
  <!-- menu droit -->
 <div id="menudroit">
   <div class ="menudroitbouton"><a href="http://liens.com">0</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">2</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">3</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">4</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">5</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">6</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">7</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">8</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">9</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">10</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">11</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">12</a></div>
    <div class ="menudroitbouton"><a href="http://liens.com">13</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">14</a></div>
   <div id="menudroitbas"></div>
 </div>
  <!-- fin du menu droit -->
 <!-- menu gauche-->
 <div id="menugauche">
   <div class ="menugauchebouton"><a href="http://liens.com">0</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">2</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">3</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">4</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">5</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">6</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">7</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">8</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">9</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">10</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">11</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">12</a></div>
    <div class ="menugauchebouton"><a href="http://liens.com">13</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">14</a></div>
   <div id="menugauchebas"></div>
 </div>
  <!-- fin du menu gauche -->
  <!-- Espace  pub 468*60 -->
  <div id="pub"></div>
  <div id="banierepub"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/ban_allopass_au_clic.gif" alt="bannieres allopass au clic" /></a></div>  
  <!-- Bloc video1 -->
  <div id="blocvideo1"></div>
  <div id="imageblocvideo1"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/screenvideo.png" alt="images de la video"/></a><div/>
  <div id="transparent1">test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-</div>
  <!-- Bloc video2 -->
  <div id="blocvideo2"></div>
  <div id="imageblocvideo2"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/screenvideo.png"alt="images de la video" /></a></div>
  <div id="transparent2">test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-</div>
  <!-- Bloc video3 -->
  <div id="blocvideo3"></div>
  <div id="imageblocvideo3"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/screenvideo.png"alt="images de la video" /></a></div>
  <div id="transparent3">test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-</div>
  <!-- pages 1 a 13 -->
 <div id="pages1a13">PAGES:<a href="http://liens.com">1-</a><a href="http://liens.com">2-</a><a href="http://liens.com">3-</a><a href="http://liens.com">4-</a><a href="http://liens.com">5-</a><a href="http://liens.com">6-</a><a href="http://liens.com">7-</a><a href="http://liens.com">8-</a><a href="http://liens.com">9-</a><a href="http://liens.com">10-</a><a href="http://liens.com">11-</a><a href="http://liens.com">12-</a><a href="http://liens.com">13</a></div>
 <!-- Copyright -->
 <div id="copy"></div>
 <div id="logoeqoue"><a href="http://liens.com"></a></div>
 </div>
</body>
</html>

Voici le 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
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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
 
/*body*/
 
 
body ,html{
  width:100%;
  height:1400px;
  background:#780601 url(images/fond.png) no-repeat center ; 
  font-family: Verdana,Geneva,sans-serif;
  }
 
 
/*header*/
 
#header{
height:312px;
background:url(images/header.png) no-repeat top center;
padding:0;
margin:0 50px;
}
 
/* barre de recherche*/
 
.recherche{
height:77px;
background:url(images/recherche.png) no-repeat;
margin:-235px 385px;
}
 
/* bouton recherche*/
 
.bouton{
height:41px;
background:url(images/recherchebouton.png) no-repeat;
margin:175px 568px;
}
 
/* menu du haut*/
.menuhaut {
  width: 660px;  /* à adapter */
  height: 81px;
  margin: 0 auto;
  }
.boutonsmenuhaut {
  float : left;
  }
 
/*bouton gauche*/
#menuhautboutongauche {
  height:81px;
  width:125px;
  background:url(images/menuhautboutongauche.png) no-repeat 0 0;
  margin:-10px 2px;
  }
 
/*boutons centraux - une class */
.menuhautboutoncentre {
  width:125px;
  height:81px;
  background:url(images/menuhautboutoncentre.png) no-repeat 0 0;
  margin:-10px;
  }
 
/*bouton droit */
#menuhautboutondroit {
  height:81px;
  width:125px;
  background:url(images/menuhautboutondroit.png) no-repeat;
  margin:-10px;
  }
 
 
#menuhautboutongauche a, .menuhautboutoncentre a, #menuhautboutondroit a {
  display: block;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  line-height: 81px; 
  }
/*Fin du menu haut */
 
/*menu de droite*/
 
#menudroit {
  width: 170px;
  background: url(images/menudetg.png) -1px 0 no-repeat;
  margin : 0 155px;
  padding-top: 60px;
  }
 
/*menu de droite boutons */
.menudroitbouton {
  height:60px;
  width:136px;
  background:url(images/boutonmenudetg.png) no-repeat;
  margin : 0 14px 0;
  }
 
.menudroitbouton a {
  font-size:14px;
  text-decoration:none;
  text-align:center;
  display:block;
line-height:60px;
  }
 
#menudroitbas {
  height : 30px;
  background: #53c7fb url(images/menudetg.png) no-repeat -1px bottom;
  }
/*Fin du menu de droite */
 
/*menu de gauche*/
 
#menugauche {
  width: 170px;
  background: url(images/menudetg.png) -1px 0 no-repeat;
  margin : 0 155px;
  padding-top: 60px;
  margin:-930px 935px;
  }
 
/*menu de gauche boutons */
.menugauchebouton {
  height:60px;
  width:136px;
  background:url(images/boutonmenudetg.png) no-repeat;
  margin : 0 14px 0;
  }
 
.menugauchebouton a {
  font-size:14px;
  text-decoration:none;
  text-align:center;
  display:block;
line-height:60px;
  }
 
#menugauchebas {
  height : 30px;
  background: #53c7fb url(images/menudetg.png) no-repeat -1px bottom;
  }
/*Fin du menu de gauche */
 
/*Espace pub 468*60 */
 
#pub{
height:82px;
background:url(images/pub.png) no-repeat;
margin:25px 375px;
}
 
#banierepub {
  height:0px;
  margin:395px;
  margin-top:-100px;
  }
 
  /*bloc vidéo 1 a 3 */
 
  #blocvideo1{
height:253px;
background:url(images/blocvideo.png) no-repeat;
margin: 0 335px;
margin-top:-300px;
}
 
#blocvideo2{
height:253px;
background:url(images/blocvideo.png) no-repeat;
margin:-45px;
margin-top:-145px;
}
 
#blocvideo3{
height:253px;
background:url(images/blocvideo.png) no-repeat;
margin:-45px;
margin-top:-145px;
}
 
 /*images vidéo 1 a 3 */
 
#imageblocvideo1{
  height:253px;
  margin:382px;
  margin-top: -217px;
  }
 
  #imageblocvideo2{
  height:253px;
  margin:3px;
  margin-top:-215px;
  }
 
  #imageblocvideo3{
  height:253px;
  margin:3px;
  margin-top:-215px;
  } 
 
  /*transparent texte vidéo 1 a 3 */
 
  #transparent1{
  height:163px;
  width:301px;
  background:url(images/transparent.png) no-repeat;
  margin:200px;
  margin-top:-175px;
  } 
 
  #transparent2{
  height:163px;
  width:301px;
  background:url(images/transparent.png) no-repeat;
  margin:200px;
  margin-top:-250px;
  } 
 
  #transparent3{
  height:163px;
  width:301px;
  background:url(images/transparent.png) no-repeat;
  margin:200px;
  margin-top:-250px;
  } 
 
   /*Pages de 1 a 13 */
 
  #pages1a13{
  font-size:19px;
  color:white;
  text-decoration:none;
  text-align:center;
  margin:15px;
  margin-top:-150px;
}
 
  #copy{
height:28px;
width:541px;
background:url(images/copyright.png) no-repeat center;
margin:10px;
}
 
#logoeqoue {
height:32px;
width:128px;
background:url(images/logoeqoue.png) no-repeat center;
margin:600px;
margin-top:-55px;
}

**telliak** · 14/12/2008, 23h12

Bonsoir,
Sais pas si cela a un rapport mais la ligne 68 a une erreur dans la terminaison de la balise div :

Code html :

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

  <div id="imageblocvideo1"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/screenvideo.png" alt="images de la video"/></a><div/>

Par ailleurs ta mise en page a dû être faite en fonction de la résolution de ton écran et ton cadre bleu en fond n'est pas centré correctement.

**nO_life** · 15/12/2008, 01h00

Avec de nouvelles modifications vient de nouveaux probleme

Concernant IE chez moi j'ais un gros blanc sous le design sinon tous est a sa place.
Mon confrere me dit que chez lui le gros blanc est présent aussi mais en plus sous firefox et IE il a le menu droit qui sort du design.

Je continue les recherche de mon coté et merci a telliak de mon coté le design a été recentré.

Voici le lien des nouvelle modifications :

http://promos-mails.com/demoettest/index.html

Et voici a nouveau les script

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
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
<!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="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webmedia</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="fond"> </div>
 <div id="header"> </div>
 <div class="recherche"><form action="http://liens.com" method="post" ></form></div>
 <div class="bouton"><a href="http://liens.com"></a> </div>
 <!-- menu haut -->
 <div class="menuhaut">
   <div id="menuhautboutongauche" class="boutonsmenuhaut"><a href="http://liens.com">1g</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">2c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">3c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">4c</a></div>
   <div class="menuhautboutoncentre boutonsmenuhaut"><a href="http://liens.com">5c</a></div>
   <div id="menuhautboutondroit" class="boutonsmenuhaut"><a href="http://liens.com">6d</a></div>
 </div>
 <!-- fin du menu haut -->
  <!-- menu droit -->
 <div id="menudroit">
   <div class ="menudroitbouton"><a href="http://liens.com">0</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">2</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">3</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">4</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">5</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">6</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">7</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">8</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">9</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">10</a></div>
   <div class ="menudroitbouton"><a href="http://liens.com">11</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">12</a></div>
    <div class ="menudroitbouton"><a href="http://liens.com">13</a></div>
   <div class="menudroitbouton"><a href="http://liens.com">14</a></div>
   <div id="menudroitbas"></div>
 </div>
  <!-- fin du menu droit -->
 <!-- menu gauche-->
 <div id="menugauche">
   <div class ="menugauchebouton"><a href="http://liens.com">0</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">2</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">3</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">4</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">5</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">6</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">7</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">8</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">9</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">10</a></div>
   <div class ="menugauchebouton"><a href="http://liens.com">11</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">12</a></div>
    <div class ="menugauchebouton"><a href="http://liens.com">13</a></div>
   <div class="menugauchebouton"><a href="http://liens.com">14</a></div>
   <div id="menugauchebas"></div>
 </div>
  <!-- fin du menu gauche -->
  <!-- Espace  pub 468*60 -->
  <div id="pub"></div>
  <div id="banierepub"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/ban_allopass_au_clic.gif" alt="bannieres allopass au clic" /></a></div>  
  <!-- Bloc video1 -->
  <div id="blocvideo1"></div>
  <div id="imageblocvideo1"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/screenvideo.png" alt="images de la video"/></a></div>
  <div id="transparent1">test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-</div>
  <!-- Bloc video2 -->
  <div id="blocvideo2"></div>
  <div id="imageblocvideo2"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/screenvideo.png"alt="images de la video" /></a></div>
  <div id="transparent2">test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-</div>
  <!-- Bloc video3 -->
  <div id="blocvideo3"></div>
  <div id="imageblocvideo3"><a href="http://www.allopass-au-clic.fr/index.php"><img src="images/screenvideo.png"alt="images de la video" /></a></div>
  <div id="transparent3">test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-</div>
  <!-- pages 1 a 13 -->
 <div id="pages1a13">PAGES:<a href="http://liens.com">1-</a><a href="http://liens.com">2-</a><a href="http://liens.com">3-</a><a href="http://liens.com">4-</a><a href="http://liens.com">5-</a><a href="http://liens.com">6-</a><a href="http://liens.com">7-</a><a href="http://liens.com">8-</a><a href="http://liens.com">9-</a><a href="http://liens.com">10</a></div>
 <!-- Copyright -->
 <div id="copy"></div>
 <div id="logoeqoue"><a href="http://liens.com"></a></div>
 </div>
</body>
</html>

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
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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
body{width:90%;margin:auto;min-width:600px;max-width:2000px}
/*body*/
 
 
body ,html{
  width:100%;
  height:90%;
  margin:auto;
  min-width:600px;
  max-width:2000px
  }
 
 
/*header*/
 
#fond {
  width:100%;
  height:1400px;
  background:#780601 url(images/fond.png) no-repeat center ; 
  font-family: Verdana,Geneva,sans-serif;
  margin:auto;
  }
 
#header{
height:312px;
width:1000px;
background:url(images/header.png) no-repeat top center;
padding:0;
margin:auto;
margin-top:-1400px;
}
 
/* barre de recherche*/
 
.recherche{
height:77px;
background:url(images/recherche.png) no-repeat;
margin:-235px 385px;
}
 
/* bouton recherche*/
 
.bouton{
height:41px;
background:url(images/recherchebouton.png) no-repeat;
margin:175px 568px;
}
 
/* menu du haut*/
.menuhaut {
  width: 660px;  /* à adapter */
  height: 81px;
  margin: 0 auto;
  }
.boutonsmenuhaut {
  float : left;
  }
 
/*bouton gauche*/
#menuhautboutongauche {
  height:81px;
  width:125px;
  background:url(images/menuhautboutongauche.png) no-repeat 0 0;
  margin:-10px 2px;
  }
 
/*boutons centraux - une class */
.menuhautboutoncentre {
  width:125px;
  height:81px;
  background:url(images/menuhautboutoncentre.png) no-repeat 0 0;
  margin:-10px;
  }
 
/*bouton droit */
#menuhautboutondroit {
  height:81px;
  width:125px;
  background:url(images/menuhautboutondroit.png) no-repeat;
  margin:-10px;
  }
 
 
#menuhautboutongauche a, .menuhautboutoncentre a, #menuhautboutondroit a {
  display: block;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  line-height: 81px; 
  }
/*Fin du menu haut */
 
/*menu de droite*/
 
#menudroit {
  width: 170px;
  background: url(images/menudetg.png) -1px 0 no-repeat ;
  margin : 0 155px;
  padding-top: 60px;
  }
 
/*menu de droite boutons */
.menudroitbouton {
  height:60px;
  width:136px;
  background:url(images/boutonmenudetg.png) no-repeat;
  margin : 0 14px 0;
  }
 
.menudroitbouton a {
  font-size:14px;
  text-decoration:none;
  text-align:center;
  display:block;
line-height:60px;
  }
 
#menudroitbas {
  height : 30px;
  background: #53c7fb url(images/menudetg.png) no-repeat -1px bottom;
  }
/*Fin du menu de droite */
 
/*menu de gauche*/
 
#menugauche {
  width: 170px;
  background: url(images/menudetg.png) -1px 0 no-repeat;
  margin : 935px;
  padding-top: 60px;
  margin-top : -930px;
  }
 
/*menu de gauche boutons */
.menugauchebouton {
  height:60px;
  width:136px;
  background:url(images/boutonmenudetg.png) no-repeat;
  margin : 0 14px 0;
  }
 
.menugauchebouton a {
  font-size:14px;
  text-decoration:none;
  text-align:center;
  display:block;
line-height:60px;
  }
 
#menugauchebas {
  height : 30px;
  background: #53c7fb url(images/menudetg.png) no-repeat -1px bottom;
  }
/*Fin du menu de gauche */
 
/*Espace pub 468*60 */
 
#pub{
height:82px;
width:500px;
background:url(images/pub.png) no-repeat;
margin:375px;
margin-top:-1820px;
}
 
#banierepub {
  height:0px;
  margin:395px;
  margin-top:-450px;
  }
 
  /*bloc vidéo 1 a 3 */
 
  #blocvideo1{
height:253px;
 width:594px;
background:url(images/blocvideo.png) no-repeat;
margin:0 335px;
margin-top:-300px;
}
 
#blocvideo2{
height:253px;
 width:594px;
background:url(images/blocvideo.png) no-repeat;
margin:335px;
margin-top:-525px;
}
 
#blocvideo3{
height:253px;
 width:594px;
background:url(images/blocvideo.png) no-repeat;
margin:335px;
margin-top:-525px;
}
 
 /*images vidéo 1 a 3 */
 
#imageblocvideo1{
  height:253px;
  margin:382px;
  margin-top: -217px;
  }
 
  #imageblocvideo2{
  height:253px;
  margin:383px;
  margin-top:-552px;
  }
 
  #imageblocvideo3{
  height:253px;
  margin:383px;
  margin-top:-552px;
  } 
 
  /*transparent texte vidéo 1 a 3 */
 
  #transparent1{
  height:163px;
  width:301px;
  background:url(images/transparent.png) no-repeat;
  margin:580px;
  margin-top:-630px;
  } 
 
  #transparent2{
  height:163px;
  width:301px;
  background:url(images/transparent.png) no-repeat;
  margin:580px;
  margin-top:-630px;
  } 
 
  #transparent3{
  height:163px;
  width:301px;
  background:url(images/transparent.png) no-repeat;
  margin:580px;
  margin-top:-630px;
  } 
 
   /*Pages de 1 a 13 */
 
  #pages1a13{
  font-size:19px;
  color:white;
  text-decoration:none;
  text-align:center;
  margin:425px;
  margin-top:-530px;
}
 
  #copy{
height:28px;
width:541px;
background:url(images/copyright.png) no-repeat center;
margin:375px;
margin-top:-400px;
}
 
#logoeqoue {
height:32px;
width:128px;
background:url(images/logoeqoue.png) no-repeat center;
margin:950px;
margin-top:-425px;
}

**telliak** · 15/12/2008, 11h48

Envoyé par nO_life

Avec de nouvelles modifications vient de nouveaux probleme

Concernant IE chez moi j'ais un gros blanc sous le design sinon tous est a sa place.
Mon confrere me dit que chez lui le gros blanc est présent aussi mais en plus sous firefox et IE il a le menu droit qui sort du design.

Je continue les recherche de mon coté et merci a telliak de mon coté le design a été recentré.

Re,
Je ne sais pas ce que tu veux dire quand tu parles de «design», mais le design c'est la conception, le style, l'architecture, le modèle d'un site. Alors le design ne peut pas avoir un gros blanc

.
Tu parles de bug, mais la mise en page est tellement instable que je ne vois pas ce dont tu parles.
Deux exemples :

et avec une fenêtre moins large :

Il est inutile de donner le code CSS et HTML, ils sont visualisables en direct.
Ligne 83 un /div se balade sans div correspondant.
Tu aurais intérêt à définir un div global englobant toute page.

**nO_life** · 15/12/2008, 13h30

J'ai rajouté un div global entre les balise body.
Mais ce que je ne comprend c'est pourquoi je ne vois pas c'est défauts sur mon ordi j'ai renvoyé les modifications sur le serveur.
Si je ne vois pas les défauts comment vais-je faire pour les corriger

**telliak** · 15/12/2008, 14h36

Envoyé par nO_life

J'ai rajouté un div global entre les balise body.
Mais ce que je ne comprend c'est pourquoi je ne vois pas c'est défauts sur mon ordi j'ai renvoyé les modifications sur le serveur.
Si je ne vois pas les défauts comment vais-je faire pour les corriger

Une partie du pb vient de ce que tu considères que les dimensions de ton écran sont celles des écrans de tout le monde. Comme tu utilises du positionnement en pixels (exemple .recherche {margin:-235px 385px; }), tu n'as aucune chance que ce positionnement soit correct pour toute résolution d'écran. Tu peux peut-être t'en sortir en fixant la largeur que tu veux pour ta page (exemple : max-width:1024px dans body) et en repositionnant tout en fonction de cela.
Pour voir le pb, change la résolution, ou celle de la fenêtre et tu verras le résultat.
Si tu utilises le débogueur de Firefox, tu sera peut-être surpris du placement de tes blocs et cela t'aidera à comprendre (à première vue, menugauche, par exemple, est placé... à droite et un peu au radar).
Je réitère ma question : c'est quoi le bug dont tu parles ?

**nO_life** · 15/12/2008, 16h51

Le bug a été corigé .
Donc si j'ais bien compris.Je change ce bout de script de la maniere suivante :

avant:

Code :

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

1
2
3
4
5
6
7
8
9
10
/*body*/
 
 
body ,html{
  width:100%;
  height:90%;
  margin:auto;
  min-width:600px;
  max-width:2000px
  }

après

Code :

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

1
2
3
4
5
6
7
8
9
10
 
/*body*/
 
 
body ,html{
  width:100%;
  height:90%;
  margin:auto;
  max-width:1024px
  }

**telliak** · 15/12/2008, 17h04

Mouais, moi je mettrais carrément un width: 1024px, tu devras ensuite réajuster tes positionnements mais au moins ils resteront fixés.
Ceci dit, ce n'est peut-être pas ce que tu voulais faire : tu auras un design fixe et non fluide selon la dimension de la fenêtre.

Fais gaffe tu as des définitions en double : d'une part dans body{ }, d'autre part dans body, html{ }; je n'en comprends pas l'intérêt.

**nO_life** · 15/12/2008, 18h17

Fais gaffe tu as des définitions en double : d'une part dans body{ }, d'autre part dans body, html{ }; je n'en comprends pas l'intérêt.

Oui je m'en suis aperçus a partir de ta remarque sur les 1024 px.

J'ai effectué tous les changement j'espère que ce coup si l'affichage est cohérent.

**telliak** · 15/12/2008, 21h35

Envoyé par nO_life

J'ai effectué tous les changement j'espère que ce coup si l'affichage est cohérent.

Enfin... presque

Tu n'as pas mis un width de 1024px mais un max-width de 1024px et un width de 100%, ce qui fait que si la fenêtre est inférieure à 1024 en largeur, il y a du vent dans les voiles et tout se balade un peu n'importe comment, comme l'a observé Kypper_667.

**nO_life** · 15/12/2008, 22h54

Maintenant tous le design n'est plus centré

Désolé d'etre aussi embétant

**telliak** · 16/12/2008, 11h20

Envoyé par nO_life

Maintenant tous le design n'est plus centré

Salut,
C'est impec avec Firefox, j'avoue peu connaître les arcanes d'IE.
Personnellement, pour centrer une page (FF et IE) j'utilise la technique suivante :

Code :

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

1
2
3
4
5
6
7
#layconteneur {
  position: absolute; 
  left: 50%;
  margin-left: -512x;   /* moitié de la valeur du paramètres width */
  width: 1024px;
  top: 0px;
}

layconteneur étant le div global qui enchâsse toute la page

**nO_life** · 16/12/2008, 13h35

En tous les cas un grand merci a toi pour cette aide a toute épreuve

L'affichage actuel du design bug normal sa vient de mon serveur

Sinon pour ma culture personnelle pour un design fluide et extensible que faudrait t'il changé bien sur si cela t'embête pas de répondre a ces questions car je ne trouve pas de tutos ou cours qui satisfait pleinement mon envie d'en apprendre toujours plus .

Affichage incohérent sous IE par rapport a firefox

CSS

Discussions similaires

Partager

Partager