Décalage selon résolution du navigateur

**nO_life** · 28/01/2009, 17h44

Bonjour a tous,
Je rencontre un soucis concernant cette découpe : http://promos-mails.com/demoettest/polaire/index.html

Sur FireFox dès que je passe en 1024*768 les menus de droite et gauche ce décale vers la droite mais seulement sous FireFox .

Quelqu'un pourrait il éclairer ma lanterne

Code HTML :

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
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
<!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" > 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Polaire</title>
<link rel="stylesheet" media="screen" title="Style par défaut" href="stylepolaire.css" />
<!--[if IE]><link href="stylepolaireie.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript">
                        rd=10;
                        la=screen.availWidth;
                        function c1()
                        {
                        rd+=10;
                        if (rd>la-150) // selon longueur texte
                        rd=20;
                        el=document.getElementById("scriptdefilement");
                        el.style.left=rd;
                        setTimeout("c1()", 100); // vitesse de défilement
                        }
                </script>
</head>
<body onLoad="c1();">
 
<div id="menugauchehaut">
<div id="menugauchecontenue">
<li><a class="textemenugauche " href="visiteguide.html"><img src="images/visiteguide.png" alt="visite guide"></a></li>
<li><a class="textemenugauche " href="sommaire.html"><img src="images/sommaire.png" alt="sommaire"></a></li>
<li><a class="textemenugauche " href="inscriptions.html"><img src="images/inscriptions.png" alt="inscriptions"></a></li>
<li><a class="textemenugauche " href="bonus.html"><img src="images/bonus.png" alt="bonus"></a></li>
<li><a class="textemenugauche " href="news.html"><img src="images/news.png" alt="news"></a></li>
<li><a class="textemenugauche " href="cadeaux.html"><img src="images/cadeaux.png" alt="cadeaux"></a></li>
<li><a class="textemenugauche " href="vip.html"><img src="images/vip.png" alt="vip"></a></li>
<li><a class="textemenugauche " href="plusdeparties.html"><img src="images/plusdeparties.png" alt="plus de parties"></a></li>
<li><a class="textemenugauche " href="forum.html"><img src="images/forum.png" alt="forum"></a></li>
<li><a class="textemenugauche " href="livredor.html"><img src="images/livredor.png" alt="livre d'or"></a></li>
<li><a class="textemenugauche " href="annonceur.html"><img src="images/annonceur.png" alt="annonceurs"></a></li>
<li><a class="textemenugauche " href="partenaires.html"><img src="images/partenaires.png" alt="partenaires"></a></li>
<li><a class="textemenugauche " href="bannieres.html"><img src="images/bannieres.png" alt="bannieres"></a></li>
<li><a class="textemenugauche " href="cadeauxenvoye.html"><img src="images/cadeauxenvoye.png" alt="cadeaux envoyés"></a></li>
<li><a class="textemenugauche " href="solidarite.html"><img src="images/solidarite.png" alt="solidarite"></a></li>
<li><a class="textemenugauche " href="achatdefilleuls.html"><img src="images/achatdefilleuls.png" alt="achat de filleuls"></a></li>
<li><a class="textemenugauche " href="enchere.html"><img src="images/enchere.png" alt="enchere"></a></li>
<li><a class="textemenugauche " href="reglement.html"><img src="images/reglement.png" alt="reglement"></a></li>
</div>
<div id="menugauchebas"></div>
</div>
 
<div id="menugauchehaut2">
<div id="menugauchecontenue2">
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire1"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire2"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire3"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire4"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire5"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire6"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire7"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire8"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire9"></a></li>
<li><a class="textemenugauche2 " href="http://liens.com"><img src="images/boutonpartenaire.png" alt="partenaire10"></a></li>
</div>
<div id="menugauchebas2"></div>
</div>
 
<div id="menudroithaut">
<div id="menudroitcontenue">
<form action="http://liens.com" method="post" >
<div id="pseudo">
<div class="pseudo"><INPUT type="text" name="pseudo"></div></div>
<div id="motdepass">
<div class="motdepass"><INPUT type="password" name="pass"></div></div>
<div id="boutonconnexion"><input type="image" src="images/boutonconnexion.png"></div>
</form>
<div id="zonemembre"></div>
</div>
<div id="menudroitbas"></div>
</div>
 
<div id="menudroithaut2">
<div id="menudroitcontenue2">
<div id="livredortitre"></div>
<marquee behavior="scroll" direction="up" scrollamount="1" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()"style="height:670px;width:125px;margin:20px;margin-top:0px">
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,votre text ici,
</marquee>
</div>
<div id="menudroitbas2"></div>
</div>
 
<div id="header">
<div class="stats">
<p class="inscrits">123456789</p>
<p class="connecte">123456789</p>
<p class="cadeaux">123456789</p>
</div>
<div id="zonedefilante">
<div class="scriptdefilement">
<marquee scrollAmount="7">votre texte</marquee>
</div>
</div>
<div id="contenu">
<a id="banierehaut" href="index.html"><img src="images/banieretest.png" alt="publicite haut"></a><br>
<div id="jeuxgratuithaut">
<div id="jeuxgratuit"></div>
<div id="fondjeuxgratuit">
<li style="margin: 8px 0pt 0pt 13px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux gratuit 1"></a></li>
<li style="margin: 8px 0pt 0pt 18px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux gratuit 2"></a></li>
<li style="margin: 8px 0pt 0pt 16px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux gratuit 3"></a></li>
<li style="margin: 8px 0pt 0pt 17px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux gratuit 4"></a></li>
</div></div>
<div id="jeuxgratuitcontenue">
<?php /*contenue*/ ?><br>
<div id="jeuxamise"></div>
<div id="fondjeuxamise">
<li style="margin: 8px 0pt 0pt 13px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux a mise 1"></a></li>
<li style="margin: 8px 0pt 0pt 18px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux a mise 2"></a></li>
<li style="margin: 8px 0pt 0pt 16px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux a mise 3"></a></li>
<li style="margin: 8px 0pt 0pt 17px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux a mise 4"></a></li>
</div>
 
<div id="jeuxvip"></div>
<div id="fondjeuxvip">
<li style="margin: 8px 0pt 0pt 13px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux vip 1"></a></li>
<li style="margin: 8px 0pt 0pt 18px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux vip 2"></a></li>
<li style="margin: 8px 0pt 0pt 16px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux vip 3"></a></li>
<li style="margin: 8px 0pt 0pt 17px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux vip 4"></a></li>
</div>
 
<div id="jeuxspeciaux"></div>
<div id="fondjeuxspeciaux">
<li style="margin: 8px 0pt 0pt 13px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 1"></a></li>
<li style="margin: 8px 0pt 0pt 18px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 2"></a></li>
<li style="margin: 8px 0pt 0pt 16px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 3"></a></li>
<li style="margin: 8px 0pt 0pt 17px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 4"></a></li>
</div>
 
<div id="jeuxquetes"></div>
<div id="fondjeuxquete">
<li style="margin: 8px 0pt 0pt 13px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 1"></a></li>
<li style="margin: 8px 0pt 0pt 18px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 2"></a></li>
<li style="margin: 8px 0pt 0pt 16px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 3"></a></li>
<li style="margin: 8px 0pt 0pt 17px; height: 44px; width: 73px; float: left;"><a class="vignettejeuxgratuit " href="http://liens.com"><img src="images/vignette.png" alt="jeux speciaux 4"></a></li>
</div>
 
<br></div>
<div id="jeuxgratuitbas"></div>
<div id="banierebas"><a href="index.html"><img src="images/banieretest.png" alt="publicite haut"></a></div>
<br>
<?php /*Fin contenue*/ ?>
</div>
<div id="footer"></div>
</div>
</body>
</html>

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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
body { 
  width:100%;
  margin:auto;
  min-width:600px;
  max-width:2000px;
  background:#016181;
}
 
   html{ overflow-x:auto;}
 
  a img {
  border:0px none;
  }
 
    #header {
width:1000px;
background: url(images/header.png) no-repeat;
padding-top: 490px; /*la hauteur de l'image*/
margin:auto;
}
 
#contenu{
width:879px;
background: url(images/fondsite.png) repeat-y;
margin:-100px 59px;
min-height:1000px;
}
 
#footer{
width:1000px;
background: url(images/footer.png) no-repeat;
height: 474px; /*la hauteur de l'image*/
margin:100px auto;
}
 
.stats{
width:476px;
height:40px;
background:url(images/stats.png) no-repeat;
margin:-130px auto;
}
 
.inscrits{
width:30px;
font-size: 13px;
text-decoration: none;
text-align:right;
line-height: 10px; 
margin:15px 85px;
position:absolute;
}
 
.connecte{
width:30px;
font-size: 13px;
text-decoration: none;
text-align:right;
line-height: 10px; 
margin:15px 250px;
position:absolute;
}
 
.cadeaux{
width:30px;
font-size: 13px;
text-decoration: none;
text-align:right;
line-height: 10px; 
margin:15px 405px;
position:absolute;
}
 
#zonedefilante{
width:463px;
height:64px;
background:url(images/zonedefilante.png) no-repeat;
margin:125px auto;
}
 
.scriptdefilement{
display: block;
width:370px;
height:14px;
font-size: 14px;
text-decoration: none;
text-align:right;
line-height:60px; 
margin:80px;
}
 
#menugauchehaut {
width:192px;
background: url(images/menugauchehaut.png) no-repeat;
padding-top:95px; /*la hauteur de l'image*/
margin:345px 225px;
position:absolute;
}
 
#menugauchecontenue{
width:154px;
background: url(images/menugauchecontenue.png) repeat-y;
margin:auto 21px;
}
 
#menugauchebas{
width:154px;
background: url(images/menugauchebas.png) no-repeat;
height: 41px; /*la hauteur de l'image*/
margin:auto 21px;
}
 
#banierehaut{
width:468px;
height:60px;
background:url(images/banieretest.png) no-repeat;
margin:-10px 215px;
position:absolute;
}
 
#menudroithaut {
width:192px;
background: url(images/menugauchehaut.png) no-repeat;
padding-top:95px; /*la hauteur de l'image*/
margin:345px 860px;
position:absolute;
}
 
#menudroitcontenue{
width:154px;
background: url(images/menugauchecontenue.png) repeat-y;
margin:auto 21px;
}
 
#menudroitbas{
width:154px;
background: url(images/menugauchebas.png) no-repeat;
height: 41px; /*la hauteur de l'image*/
margin:auto 21px;
}
 
.textemenugauche a,li {
list-style :none;
display:block;
width:100%;
height:100%;
text-align:center;
margin:auto -5px;
}
 
#pseudo {
width:109px;
height:58px;
background: url(images/connection.png) no-repeat;
margin:auto 17px;
}
 
.pseudo INPUT{
width:80px;
height:20px;
margin:60px 17px;	
border: none;
}
 
#motdepass {
width:59px;
height:17px;
background: url(images/pass.png) no-repeat;
margin:30px 45px;
}
 
.motdepass INPUT{
width:80px;
height:20px;
margin:20px -10px;	
border: none;
}
 
#boutonconnexion {
width:59px;
height:17px;
margin:30px 45px;
}
 
#zonemembre {
width:98px;
height:41px;
background: url(images/zonemembre.png) no-repeat;
margin:auto;
}
 
#menugauchehaut2 {
width:192px;
background: url(images/menugauchehaut.png) no-repeat;
padding-top:95px; /*la hauteur de l'image*/
margin:1000px 225px;
position:absolute;
}
 
#menugauchecontenue2{
width:154px;
background: url(images/menugauchecontenue.png) repeat-y;
margin:auto 21px;
}
 
#menugauchebas2{
width:154px;
background: url(images/menugauchebas.png) no-repeat;
height: 41px; /*la hauteur de l'image*/
margin:auto 21px;
}
 
.textemenugauche2 a,li {
list-style :none;
display:block;
width:100%;
height:100%;
text-align:center;
margin:auto -5px;
}
 
#menudroithaut2 {
width:192px;
background: url(images/menugauchehaut.png) no-repeat;
padding-top:95px; /*la hauteur de l'image*/
margin:700px 860px;
position:absolute;
}
 
#menudroitcontenue2{
width:154px;
background: url(images/menugauchecontenue.png) repeat-y;
margin:auto 21px;
}
 
#menudroitbas2{
width:154px;
background: url(images/menugauchebas.png) no-repeat;
height: 41px; /*la hauteur de l'image*/
margin:auto 21px;
}
 
#livredortitre{
width:103px;
height:20px;
background: url(images/livredortitre.png) no-repeat;
margin:auto 20px;
}
 
#jeuxgratuithaut {
width:474px;
background: url(images/jeuxgratuithaut.png) no-repeat;
padding-top: 250px; /*la hauteur de l'image*/
margin:60px auto;
}
 
#jeuxgratuitcontenue{
width:450px;
background: url(images/jeuxgratuitcontenue.png) repeat-y;
margin:-60px 217px;
}
 
#jeuxgratuitbas{
width:474px;
background: url(images/jeuxgratuitbas.png) no-repeat;
height: 45px; /*la hauteur de l'image*/
margin:50px 208px;
 
}
 
#jeuxgratuit{
width:236px;
height:86px;
background: url(images/jeuxgratuit.png) no-repeat;
margin:-140px 125px;
}
 
#fondjeuxgratuit{
width:381px;
height:85px;
background: url(images/rangvignette.png) no-repeat;
margin:150px 50px;
position:absolute;
}
 
.vignettejeuxgratuit a,li {
list-style :none;
display:block;
height:100%;
width:100%;
}
 
#jeuxamise{
width:246px;
height:92px;
background: url(images/jeuxamise.png) no-repeat;
margin:20px 100px;
}
 
#fondjeuxamise{
width:381px;
height:85px;
background: url(images/rangvignette.png) no-repeat;
margin:-10px 35px;
}
 
#jeuxvip{
width:184px;
height:82px;
background: url(images/jeuxvip.png) no-repeat;
margin:10px 125px;
}
 
#fondjeuxvip{
width:381px;
height:85px;
background: url(images/rangvignette.png) no-repeat;
margin:10px 35px;
}
 
#jeuxspeciaux{
width:266px;
height:92px;
background: url(images/jeuxspeciaux.png) no-repeat;
margin:-10px 100px;
}
 
#fondjeuxspeciaux{
width:381px;
height:85px;
background: url(images/rangvignette.png) no-repeat;
margin:10px 35px;
}
 
#jeuxquetes{
width:164px;
height:86px;
background: url(images/quetes.png) no-repeat;
margin:-10px 130px;
}
 
#fondjeuxquete{
width:381px;
height:85px;
background: url(images/rangvignette.png) no-repeat;
margin:20px 35px;
}
 
#banierebas{
width:468px;
height:60px;
margin:-40px 215px;
}

**desert** · 28/01/2009, 20h25

Essaie en réduisant la marge gauche de tes menus. Exemple :

Code css :

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

1
2
3
4
#menugauchehaut {
     margin:345px 100px; /* au lieu des 225px */
     ...
}

**GihefBey** · 29/01/2009, 02h52

Bonjour,

Place l'ensemble de ta page dans un autre bloc qui englobera donc tout le reste.
Et tout ça sera solidaire.

Comme l'a fait l'intervenant dans sa réponse.
Sa réponse ne correspond pas à ta question, mais sa solution elle si.
Il a créé une <div id="conteneur">

-

**romain_ci** · 29/01/2009, 11h28

Salut !

Rajoute ca dans ton css

Code :

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

1
2
3
4
5
 
* {
 margin:0px;
 padding:0px;
}

**nO_life** · 29/01/2009, 16h15

Tous d'abord merci a vous.
J'ai fait des essais avec une div conteneur comme lu sur le topic proposé mais aucun changement toujours le même soucis avec FireFox.

Concernant la réponse de romain_ci soit j'ai mal compris ton intervention soit cela ne change rien non plus

Je continue mes recherche si quelqu'un a une idée qu'il n'hésite pas

**GihefBey** · 29/01/2009, 19h10

Envoyé par nO_life

J'ai fait des essais avec une div conteneur comme lu sur le topic proposé mais aucun changement toujours le même soucis avec FireFox.

Insiste.

Par exemple (lien valide quelques jours)

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<body onLoad="c1();">
 
<div id="conteneur">
 
  <div id="menugauchehaut">
... le reste...
  <div id="footer"></div>
  </div>
 
</div>
 
</body>

avec quelque chose comme

Code css :

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

1
2
3
4
#conteneur {
  width : 1000px;
  margin : 0 auto;
  }

Il te reste à adapter tout le reste (gestion des marges devenues inutiles...)

Et puis, tu peux utiliser la même méthode pour tes menus.
Regroupe leurs différents éléments dans un bloc. Ça sera plus simple à gérer.

-

Décalage selon résolution du navigateur

CSS

Vue hybride

Discussions similaires

Partager

Partager