FF : tableau qui passe sous le menu de droite

**pop_up** · 26/05/2008, 15h16

Bonjour,

Habituellement, j'ai plutôt des problèmes avec IE mais cette fois ci, c'est firefox qui ne se comporte pas comme prévu. Si on rétréci la page en largeur, le tableau passe qous le menu de droite comme s'il n'etait pas dans le flux. J'ai essayé de jouer avec les overflow mais rien y fait pour que le comportement sois identique à IE, c'est a dire que le tableau descende en dessous du menu droit quand il ne peut plus se rétrécir.

Testé sous IE6 : OK
testé sous firefox 2 : KO

voici un code qui permet de voir ce comportement :

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
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
 
	/* mise a zero des marges de la page HTML */
html {
    margin: 0em;
    padding: 0em;
}
 
/* definition du format du corps de la page */
body {
    margin: 0;
    padding: 0;
    min-width: 37.7em;                                                          /* environ 600px */
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
/* mise à zero des bordures et marges des elements de base de la page */
div, span, p, a, img, form, h1, h2, h3, h4, h5, h6 {
    border: 0em;
    padding: 0em;
    margin: 0em;
}
 
/**
 ****************************
 * Redefinition des tags HTML
 ****************************
 */
 
a {
    color: #014F61;                                                             /* couleur des liens par defaut */
    text-decoration: none;                                                      /* non souligne par defaut */
}
 
a:visited {
    color: #990000;
}
 
a:hover {
    text-decoration: underline;                                                 /* souligne lors du survol */
}
 
 
 
h1 {
    font-size: 1.63em;                                                          /* 26px */
    color: #014F61;
    margin: 0em;
    padding-top: 0.3em;
    padding-bottom: 0.5em;
    font-weight: normal;
    text-align: center;
}
 
p {
    font-size: 0.75em;                                                          /* 12px */
    line-height: 1.2em;
    text-align: justify;
}
 
/**
 **************
 * Mise en page
 **************
 */
 
#header {
    width: 100%;
    background-image: url("../images/fond-recherche.gif");
    background-position: right;
    background-repeat: repeat-y;
}
 
/* bandeau haut */
#entete {
    padding: 0 0 0.5em 0;
    font-size: .63em;
}
 
#entete ul {
    margin: 0em;
    padding: 0em;
    text-align: left;
    display: inline;
}
 
#entete li {
    display: inline;
    color: #57565B;
}
 
#entete a {
    margin: .6em .5em .3em .5em;
    padding: 0;
}
 
#entete li a {
    padding: 0em;
    margin: 0em;
    color: #57565B;
}
 
#entete li.bandeauHaut a {
    font-weight: bold;
}
 
span.drapeau {
    position: relative;
    top: 0.3em;
    padding: 0 0.3em 0 0.1em;
}
 
span.rss {
    position: relative;
    top: 0.1em;
    padding: 0 0.3em 0 0.1em;
}
 
/* banniere englobant logo, ecogeste, recherche */
#banniere {
    margin: 0em; 
    padding: 0em; 
    width: 100%; 
    overflow: hidden;
    background-image: url("../images/fond-banniere.gif");
    background-position: left;
    background-repeat: repeat-y;
}
 
#logo {
    margin: 0em;
    padding-left: 2.3em;                                                        /* equivaut a 37px */
    height: auto;
    float: left;
    width: auto;
}
 
 
#bandeauEcogeste {
    float: left;
    width: 24em;
    margin: .5em 0 0 1.6em;
    padding: 0 0 0 6.9em;
    height: auto;
    background-image: url("../images/fond-ecogeste.gif");
    background-position: left;
    background-repeat: repeat-y;
}
 
p.accrocheOrange {
    color: #FE5B02;
    font-size: 0.6em;                                                           /* equivaut a 10px */
    font-weight: bold;
    padding-left: 3em;
}
 
#bandeauEcogeste p.titre {
    padding-left: 1.45em;
    font-size: 1.2em;
    font-weight: bold;
}
 
#bandeauEcogeste p.texte {
    padding-left: 2.2em;
    font-size: 0.8em;
    line-height: 1em;
}
 
#recherche {
    margin: 0em;
    padding: 0em;
    position: relative;
    display: block;
    float: right;
    text-align: right;
}
 
#recherche input.texte {
 height: 1.3em;
 width: 11.8em;
 font-size: 0.7em;
 border: 0.1em solid #1C555F;
 margin: 0em;
 padding: 0em;
}
 
#recherche p.titre {
    font-size: 0.8em;
    font-weight: bolder;
    margin: 0em;
    padding: 0 0.3em 0 0;
}
 
#recherche div { 
    margin-bottom: 0.2em;
}
 
#recherche label {
    font-size: 0.9em;
}
 
#recherche button {
    width: 12em;
}
 
#recherche div.bouton2 {
    padding: 0.3em 0.3em 0.1em 1.5em;
    font-size: 0.7em;
    text-align: right;
}
 
#recherche div.bouton2 a {
    color: #000000;
    font-weight: bold;
}
 
 
 
/* conteneur */
#conteneur {
    float: left;
    width: 100%;
    background-image: url("../images/filet-double.gif");                        /* donne l illusion que le menu gauche continue jusqu en bas */
    background-position: 12em 0;                                                /* fond positionne a 12em du bord car le flux commence en dehors de l ecran */
    background-repeat: repeat-y;
    display: inline;                                                            /* evite le double margin bug d ie */
    margin-left: -12em;
}
 
#menuGauche {
    width: 12em;
    float: left;
    margin-left: 12em;                                                          /* permet de ramener la colonne de gauche de l ecran */
    display: inline;                                                            /* evite le double margin bug d'ie */
}
#menuGauche ul {
	font-size: 0.75em;
	padding: 0 0 1em 0;
}
 
#contenu {
    margin-left: 24em;                                                          /* marge negative du conteneur + la largueur de la colonne de gauche */
}
 
#menuDroite {
    padding-left: 100%;                                                         /* sort le div de l ecran */
    margin-left: -12em;                                                         /* le ramene de sa largeur dans l ecran */
}
 
#menuDroite ul {
	font-size: 0.75em;
	padding: 0 0 0 0;
	margin:0 0 0 1.5em;
}
 
 
 
 
 
 table {
    background-color: #8DD2DC;
    width: auto;
    border-spacing: 0.1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
 
table caption {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5em;
}
 
table th {
    text-align: center;
    font-size: 0.75em;
}
 
table td {
    padding: 0.33em;
    font-size: 0.75em;
    background-color: #FFFFFF;
}
table td a {
    color: #014F61;
    font-weight: bold;
}
 
table td ul li {
    font-size: 1.3em;
}
 
caption {
    font-weight: bold;
    color: #014F61;
    font-size: 0.75em;
}
 
table.largeurMax {
    width: 100%;    
}
 
/* second style */
table.style1 {
    width: auto;
}
 
table.style1 th {
    margin: 0;
    padding: 0.13em 0 0.13em 0.31em;
    background-color: #8DD2DC;
    font-weight: bold;
}
 
table.style1 tr {
    font-size: 0.8em;
}
 
table.style1 tr.bleuClair {
    background-color: #E1F3F6;
}
 
table.style1 td {
    margin: 0;
    padding: 0.06em 0.13em 0.06em 0.13em;
}
 
table.style1 td a {
    color: #014F61;
    font-weight: bold;
}
 
/**
 ********************************
 * Styles personnalises (classes)
 ********************************
 */
 
table td.titre {
    background-color: #8DD2DC;
}
 
 
	</style>
</head>
<body>
<div id="principal">
    <div id="conteneur">
        <div id="menuGauche">
			<ul>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
			</ul>
		</div>
        <div id="contenu">
            <div id="page">
                <h1>Psdfdfsdff df sqdfsdfsdfds sdf qssdffsdfsdfdf f sdf qsdfsdqf</h1>
	<p>sdfsqdfsdf sf sdf qsdf qsdf sdfqf sqdf sqdfqsdfsf qsq dsfzersfq dsqfs dfsqersfq sfqsdf <br /><br /></p>
	<table class="style1" summary="dsfg dfsg dfg dffg dfsg dsfg dsfg dfg dfg sdg sdfg etydf ">
			<caption>sdf qssdffsdfsdfdf f sdf qsdfsdqf</caption>
			<tr>
				<th colspan="4" scope="col" abbr="rezarezareza">Aaaaaaaaaaaa ccccccccccc</th>
			</tr>
			<tr>
				<th scope="col" abbr="Nnnnnnnn">bnbnvc</th>
				<th scope="col" abbr="tttttt">tttttttt tttttt tttttt</th>
				<th scope="col" abbr="iiiiiiiiii">Iiiiiiiiiiiii</th>
				<th scope="col" abbr="ddddddddddddd">DDDDDdddddddddd</th>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
 
</table>
 
 
 
 
			</div>
        </div>
    </div>
    <div id="menuDroite">
		<ul>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
		</ul>   
	</div>
</div>
</body>
</html>

merci

**Er3van** · 26/05/2008, 15h31

Le truc c'est que comme ton texte dénué de sémantique, repérer les différents blocs parait compliqué...

Pour autant, tu n'utilises que du positionnement relatif, pas de z-index, et a priori, il n'y a pas d'incohérence majeure.

Je dois avouer que ton problème me laisse perplexe, surtout que le menu qui passe en dessous, est placé après dans le code html, et devrait donc être au dessus dans le cas d'un chevauchement, puisque placé après dans le flux.

Il parait effectivement que ton tableau sorte du flux, pourquoi est une question à laquelle je ne saurais répondre dans l'instant

**pop_up** · 26/05/2008, 15h47

L'ordre de mon code est du aux exigence du clients ^^.

Le truc c'est que le site doit être accessible et que le client voulait que l'ordre du flux soit menu gauche, contenu, menu droit.

par contre je ne vois pas pourquoi le tableau sort du flux alors que du texte reste bien dans le flux.

**Candygirl** · 26/05/2008, 15h57

Envoyé par pop_up

Si on rétréci la page en largeur, le tableau passe qous le menu de droite comme s'il n'etait pas dans le flux.

[...]

Testé sous IE6 : OK
testé sous firefox 2 : KO

Je ne partage pas cette analyse de la situation...

Si le tableau reste sur la droite c'est au contraire parce qu'il est à la place qu'il doit occuper dans le flux. Le flux normal s'écoule sur le côté des flottants, ce que suit le tableau. Tout le contenu passerait au-dessous si le contenu était lui-même en float. Opera et safari réagissent la même chose que FF, seul IE se distingue.

Sur IE6 l'affichage est tout sauf ok... (c'est ok sur IE7) As-tu regardé où se retrouve ta colonne de droite lorsque le menu passe au-dessous?

Ce type de montage n'est pas solide sur IE6.

**pop_up** · 26/05/2008, 16h22

Sur IE6 l'affichage est tout sauf ok... (c'est ok sur IE7) As-tu regardé où se retrouve ta colonne de droite lorsque le menu passe au-dessous?

Le menu passe pas au desous avec IE 6 sauf si on retrecie vraiment trop. A cemoment la je le voit en dessous et il s'affiche correctement je trouve.

Mon principal problème est la superposition du tableau et du menu droit sous firefox. Parce que si ça se superpose ça devient plus du tout accessible non ?

En réalité, je voudrai bien trouver un moyen de faire passer le menu droit en dessous du contenu si celui-ci devient trop large mais ça va me faire changer la mise en page non ?

Je suis bien avancé dans le projet et je prefererai donc trouvé une solution pour corriger ceci plutot que changer la structure si c'est possible.

qu'en penses tu ?

**Candygirl** · 26/05/2008, 17h07

Envoyé par pop_up

Le menu passe pas au desous avec IE 6 sauf si on retrecie vraiment trop. A cemoment la je le voit en dessous et il s'affiche correctement je trouve.

Chez moi, dès que le tableau passe en-dessous, le menu droite est dans les choux à gauche. Maintenant je ne suis pas avec une version d'IE6 officielle...

Envoyé par pop_up

Mon principal problème est la superposition du tableau et du menu droit sous firefox. Parce que si ça se superpose ça devient plus du tout accessible non ?

Effectivement

Envoyé par pop_up

Je suis bien avancé dans le projet et je prefererai donc trouvé une solution pour corriger ceci plutot que changer la structure si c'est possible.

Faire passer le tableau en-dessous, je ne vois pas trop comment; tu peux, par contre, mettre un min-width à ton contenu pour éviter le chevauchement (mais faire apparaître une scrollbarre).

Moi je ferais une structure du genre, c'est ce que je considère comme le plus accessible si tu dois respecter la colonne droite après le contenu 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
 
body {
    margin:0;
    padding:0; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
 
#conteneur {
    background:red;
		max-width:70em;
		margin:0 auto;
}
 
#menuGauche {
    width: 17%;
    float: left;
		min-width:8em;                                                         
}
#menuGauche ul {
	font-size: 0.75em;
	padding: 0 0 1em 0;
}
 
#contenu {
  float:left;
	width:60%;
	margin-left:3%;
	display:inline;
	min-width:25em;                                                    
}
 
#menuDroite {
    width: 17%;
    float: right;
		min-width:8em;
}
 
#menuDroite ul {
	font-size: 0.75em;
	padding: 0 0 0 0;
	margin:0 0 0 1.5em;
}
 
 
 
 
 
 table {
    background-color: #8DD2DC;
    width: auto;
    border-spacing: 0.1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
 
table caption {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5em;
}
 
table th {
    text-align: center;
    font-size: 0.75em;
}
 
table td {
    padding: 0.33em;
    font-size: 0.75em;
    background-color: #FFFFFF;
}
table td a {
    color: #014F61;
    font-weight: bold;
}
 
table td ul li {
    font-size: 1.3em;
}
 
caption {
    font-weight: bold;
    color: #014F61;
    font-size: 0.75em;
}
 
table.largeurMax {
    width: 100%;    
}
 
/* second style */
table.style1 {
		float:left;
}
 
table.style1 th {
    margin: 0;
    padding: 0.13em 0 0.13em 0.31em;
    background-color: #8DD2DC;
    font-weight: bold;
}
 
table.style1 tr {
    font-size: 0.8em;
}
 
table.style1 tr.bleuClair {
    background-color: #E1F3F6;
}
 
table.style1 td {
    margin: 0;
    padding: 0.06em 0.13em 0.06em 0.13em;
}
 
table.style1 td a {
    color: #014F61;
    font-weight: bold;
}
 
/**
 ********************************
 * Styles personnalises (classes)
 ********************************
 */
 
table td.titre {
    background-color: #8DD2DC;
}
 
 
	</style>
</head>
<body>
    <div id="conteneur">
        <div id="menuGauche">
			<ul>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
			</ul>
		</div>
        <div id="contenu">
            <div id="page">
                <h1>Psdfdfsdff df sqdfsdfsdfds sdf qssdffsdfsdfdf f sdf qsdfsdqf</h1>
	<p>sdfsqdfsdf sf sdf qsdf qsdf sdfqf sqdf sqdfqsdfsf qsq dsfzersfq dsqfs dfsqersfq sfqsdf <br /><br /></p>
	<table class="style1" summary="dsfg dfsg dfg dffg dfsg dsfg dsfg dfg dfg sdg sdfg etydf ">
			<caption>sdf qssdffsdfsdfdf f sdf qsdfsdqf</caption>
			<tr>
				<th colspan="4" scope="col" abbr="rezarezareza">Aaaaaaaaaaaa ccccccccccc</th>
			</tr>
			<tr>
				<th scope="col" abbr="Nnnnnnnn">bnbnvc</th>
				<th scope="col" abbr="tttttt">tttttttt tttttt tttttt</th>
				<th scope="col" abbr="iiiiiiiiii">Iiiiiiiiiiiii</th>
				<th scope="col" abbr="ddddddddddddd">DDDDDdddddddddd</th>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
 
</table>
 
 
 
 
			</div>
    </div>
    <div id="menuDroite">
		<ul>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
		</ul>   
	</div>
</div>
</body>
</html>

Un max-width évite que le site ne s'étende trop, les lignes trop longues sont fatiguantes pour la lectures (à émuler éventuellement pour IE6)

En taille normale le site tient correctement en 800x600.

Il réagit correctement à l'agrandissement des caractères en occupant le maximum de place à disposition et les colonnes de menu sont aussi élargies = plus agréable qu'une trop petite taille fixe en pixels.

Grâce au min-width en em on évite les chevauchements (pas besoin d'émuler sur IE6 puisqu'il agrandit forcément le conteneur si le contenu dépasse).

**pop_up** · 26/05/2008, 17h22

Moi je ferais une structure du genre, c'est ce que je considère comme le plus accessible si tu dois respecter la colonne droite après le contenu dans le html:

Je suis d'accord avec toi et c'est bien la structure que j'aurai faite sauf que le client veut que le menu droit et gauche aient une taille fixe (en em absolument) donc c'est pour ça que j'ai pas utilisé les %.

...par contre, mettre un min-height à ton contenu pour éviter le chevauchement (mais faire apparaître une scrollbarre).

un min-height ou un min-width ? parce que c'est quand on rétréci en largeur que ça se supperpose non ?

Le probleme des min-width et max-width aussi c'est que ils ne fonctionnent pas pour IE non ?

J'ai l'impression que je suis dans un cul de sac la non

**Candygirl** · 26/05/2008, 17h42

Envoyé par pop_up

Je suis d'accord avec toi et c'est bien la structure que j'aurai faite sauf que le client veut que le menu droit et gauche aient une taille fixe (en em absolument) donc c'est pour ça que j'ai pas utilisé les %.

Il te reste à lui démontrer que ce n'est pas une bonne idée

Envoyé par pop_up

un min-height ou un min-width ? parce que c'est quand on rétréci en largeur que ça se supperpose non ?

Oui, désolée, c'est bien min-width, j'édite mon poste précédent

**pop_up** · 28/05/2008, 09h21

le probleme d'un design en % est qu'il ne correspondra pas au design de sa maquette.

Ce que j'avais fait c'est que j'ai repris un design css à partir du site acessiweb.
voici un lien edité ^^
c'est un design avec deux colonne semi fixes.

Est ce qu'il n'y aurait pas un moyen d'empêcher la superposition en cachant le tableau et en mettant une scrollbar ? J'ai essayé avec les overflow mais avec mon sesign j'ai pas l'impression que ça marche.

**Candygirl** · 28/05/2008, 10h30

Soit tu mets un min-width plus grand sur le body pour que le tableau reste en place jusqu'à l'apparition de la scroll barre (je trouve perso plus agréable pour consulter si vraiment tu dois grader ce montage mais perso je ferais tout pour convaincre le client de passer à autre chose).

Soit tu met un overflow:auto sur ton #contenu à la place du margin-left. le truc c'est que sur FF tu penses pas forcément à aller chercher la barre tout en bas et de toute manière c'est tellement étroit pour visionner le tableau c'est l'enfer pour visionner les premières lignes d'aller chercher la scroll barre tout en bas. Sur IE, il considère que le #menudroite passe par dessus tu dois donc ajouter un position:relatif pour le faire passer devant et avoir accès à la scroll barre. Il faudra aussi s'occuper d'IE6.

Ton lien pointe vers un fichier sur ton dd

**pop_up** · 28/05/2008, 11h47

j'ai édité mon lien merci

**pop_up** · 28/05/2008, 12h07

J'ai essayé ta solution candygirl mais il n'y a pas de scrollbar qui apparait

J'ai ajouté #contenu { min-width: 500px; background-color:red;} ce qui donne

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
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
 
	/* mise a zero des marges de la page HTML */
html {
    margin: 0em;
    padding: 0em;
}
 
/* definition du format du corps de la page */
body {
    margin: 0;
    padding: 0;
    min-width: 37.7em;                                                          /* environ 600px */
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
/* mise à zero des bordures et marges des elements de base de la page */
div, span, p, a, img, form, h1, h2, h3, h4, h5, h6 {
    border: 0em;
    padding: 0em;
    margin: 0em;
}
 
/**
 ****************************
 * Redefinition des tags HTML
 ****************************
 */
 
a {
    color: #014F61;                                                             /* couleur des liens par defaut */
    text-decoration: none;                                                      /* non souligne par defaut */
}
 
a:visited {
    color: #990000;
}
 
a:hover {
    text-decoration: underline;                                                 /* souligne lors du survol */
}
 
 
 
h1 {
    font-size: 1.63em;                                                          /* 26px */
    color: #014F61;
    margin: 0em;
    padding-top: 0.3em;
    padding-bottom: 0.5em;
    font-weight: normal;
    text-align: center;
}
 
p {
    font-size: 0.75em;                                                          /* 12px */
    line-height: 1.2em;
    text-align: justify;
}
 
/**
 **************
 * Mise en page
 **************
 */
 
#header {
    width: 100%;
    background-image: url("../images/fond-recherche.gif");
    background-position: right;
    background-repeat: repeat-y;
}
 
/* bandeau haut */
#entete {
    padding: 0 0 0.5em 0;
    font-size: .63em;
}
 
#entete ul {
    margin: 0em;
    padding: 0em;
    text-align: left;
    display: inline;
}
 
#entete li {
    display: inline;
    color: #57565B;
}
 
#entete a {
    margin: .6em .5em .3em .5em;
    padding: 0;
}
 
#entete li a {
    padding: 0em;
    margin: 0em;
    color: #57565B;
}
 
#entete li.bandeauHaut a {
    font-weight: bold;
}
 
span.drapeau {
    position: relative;
    top: 0.3em;
    padding: 0 0.3em 0 0.1em;
}
 
span.rss {
    position: relative;
    top: 0.1em;
    padding: 0 0.3em 0 0.1em;
}
 
/* banniere englobant logo, ecogeste, recherche */
#banniere {
    margin: 0em; 
    padding: 0em; 
    width: 100%; 
    overflow: hidden;
    background-image: url("../images/fond-banniere.gif");
    background-position: left;
    background-repeat: repeat-y;
}
 
#logo {
    margin: 0em;
    padding-left: 2.3em;                                                        /* equivaut a 37px */
    height: auto;
    float: left;
    width: auto;
}
 
 
#bandeauEcogeste {
    float: left;
    width: 24em;
    margin: .5em 0 0 1.6em;
    padding: 0 0 0 6.9em;
    height: auto;
    background-image: url("../images/fond-ecogeste.gif");
    background-position: left;
    background-repeat: repeat-y;
}
 
p.accrocheOrange {
    color: #FE5B02;
    font-size: 0.6em;                                                           /* equivaut a 10px */
    font-weight: bold;
    padding-left: 3em;
}
 
#bandeauEcogeste p.titre {
    padding-left: 1.45em;
    font-size: 1.2em;
    font-weight: bold;
}
 
#bandeauEcogeste p.texte {
    padding-left: 2.2em;
    font-size: 0.8em;
    line-height: 1em;
}
 
#recherche {
    margin: 0em;
    padding: 0em;
    position: relative;
    display: block;
    float: right;
    text-align: right;
}
 
#recherche input.texte {
 height: 1.3em;
 width: 11.8em;
 font-size: 0.7em;
 border: 0.1em solid #1C555F;
 margin: 0em;
 padding: 0em;
}
 
#recherche p.titre {
    font-size: 0.8em;
    font-weight: bolder;
    margin: 0em;
    padding: 0 0.3em 0 0;
}
 
#recherche div { 
    margin-bottom: 0.2em;
}
 
#recherche label {
    font-size: 0.9em;
}
 
#recherche button {
    width: 12em;
}
 
#recherche div.bouton2 {
    padding: 0.3em 0.3em 0.1em 1.5em;
    font-size: 0.7em;
    text-align: right;
}
 
#recherche div.bouton2 a {
    color: #000000;
    font-weight: bold;
}
 
 
 
/* conteneur */
#conteneur {
    float: left;
    width: 100%;
    background-image: url("../images/filet-double.gif");                        /* donne l illusion que le menu gauche continue jusqu en bas */
    background-position: 12em 0;                                                /* fond positionne a 12em du bord car le flux commence en dehors de l ecran */
    background-repeat: repeat-y;
    display: inline;                                                            /* evite le double margin bug d ie */
    margin-left: -12em;
}
 
#menuGauche {
    width: 12em;
    float: left;
    margin-left: 12em;                                                          /* permet de ramener la colonne de gauche de l ecran */
    display: inline;                                                            /* evite le double margin bug d'ie */
}
#menuGauche ul {
	font-size: 0.75em;
	padding: 0 0 1em 0;
}
 
#contenu {
    margin-left: 24em;                                                          /* marge negative du conteneur + la largueur de la colonne de gauche */
}
 
#menuDroite {
    padding-left: 100%;                                                         /* sort le div de l ecran */
    margin-left: -12em;                                                         /* le ramene de sa largeur dans l ecran */
}
 
#menuDroite ul {
	font-size: 0.75em;
	padding: 0 0 0 0;
	margin:0 0 0 1.5em;
}
 
#contenu { min-width: 500px; background-color:red;}
 
 
 
 
 
 table {
    background-color: #8DD2DC;
    width: auto;
    border-spacing: 0.1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
 
table caption {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5em;
}
 
table th {
    text-align: center;
    font-size: 0.75em;
}
 
table td {
    padding: 0.33em;
    font-size: 0.75em;
    background-color: #FFFFFF;
}
table td a {
    color: #014F61;
    font-weight: bold;
}
 
table td ul li {
    font-size: 1.3em;
}
 
caption {
    font-weight: bold;
    color: #014F61;
    font-size: 0.75em;
}
 
table.largeurMax {
    width: 100%;    
}
 
/* second style */
table.style1 {
    width: auto;
}
 
table.style1 th {
    margin: 0;
    padding: 0.13em 0 0.13em 0.31em;
    background-color: #8DD2DC;
    font-weight: bold;
}
 
table.style1 tr {
    font-size: 0.8em;
}
 
table.style1 tr.bleuClair {
    background-color: #E1F3F6;
}
 
table.style1 td {
    margin: 0;
    padding: 0.06em 0.13em 0.06em 0.13em;
}
 
table.style1 td a {
    color: #014F61;
    font-weight: bold;
}
 
/**
 ********************************
 * Styles personnalises (classes)
 ********************************
 */
 
table td.titre {
    background-color: #8DD2DC;
}
 
 
	</style>
</head>
<body>
<div id="principal">
    <div id="conteneur">
        <div id="menuGauche">
			<ul>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
			</ul>
		</div>
        <div id="contenu">
            <div id="page">
                <h1>Psdfdfsdff df sqdfsdfsdfds sdf qssdffsdfsdfdf f sdf qsdfsdqf</h1>
	<p>sdfsqdfsdf sf sdf qsdf qsdf sdfqf sqdf sqdfqsdfsf qsq dsfzersfq dsqfs dfsqersfq sfqsdf <br /><br /></p>
	<table class="style1" summary="dsfg dfsg dfg dffg dfsg dsfg dsfg dfg dfg sdg sdfg etydf ">
			<caption>sdf qssdffsdfsdfdf f sdf qsdfsdqf</caption>
			<tr>
				<th colspan="4" scope="col" abbr="rezarezareza">Aaaaaaaaaaaa ccccccccccc</th>
			</tr>
			<tr>
				<th scope="col" abbr="Nnnnnnnn">bnbnvc</th>
				<th scope="col" abbr="tttttt">tttttttt tttttt tttttt</th>
				<th scope="col" abbr="iiiiiiiiii">Iiiiiiiiiiiii</th>
				<th scope="col" abbr="ddddddddddddd">DDDDDdddddddddd</th>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
 
</table>
 
 
 
 
			</div>
        </div>
    </div>
    <div id="menuDroite">
		<ul>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
		</ul>   
	</div>
</div>
</body>
</html>

Le contenu est limité effectivement mais aucune scrollbar n'apparait et le menu droit se superpose avec le tableau.

une idée ?

merci pour ton aide

**Candygirl** · 28/05/2008, 12h07

ok pour le lien (en faite je pensais que tu voulais montrer la maquette

)

Perso je ne vais pas pouvoir t'aider plus. Pour moi ce type de montage avec 2 colonnes fixes n'a de sens qui si le contenu des colonnes est de largeur fixe = sous forme d'images.

Lorsqu'il y a un contenu texte je le trouve inefficace lors de l'agrandissement des caractères et ne trouve pas non plus judicieux d'étendre le contenu sur toute la longueur; selon les résolutions on obtient de choses inestétiques et désagréables à consulter; cela ne correspond pas à ma vision d'une bonne accessibilité.

Bonne chance avec ton projet

**Candygirl** · 28/05/2008, 12h11

Envoyé par pop_up

J'ai essayé ta solution candygirl mais il n'y a pas de scrollbar qui apparait

J'ai ajouté #contenu { min-width: 500px; background-color:red;} ce qui donne

Tu n'as pas ajouté d'overflow:auto ... et tu dois virer le margin vu que l'overflow crèe un nouveau contexte de formatage

**pop_up** · 28/05/2008, 12h21

Pour moi ce type de montage avec 2 colonnes fixes n'a de sens qui si le contenu des colonnes est de largeur fixe = sous forme d'images.

en fait il a un sens car au dessus de cette structure, il y a un bandeau avec des images et la continuité ne peut etre assuré que si on a ces colonnes fixe.

Tu n'as pas ajouté d'overflow:auto

J'avais essayé mais ça n'a rien fait et en plus le menu droit passe en dessous et se cache:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
 
	/* mise a zero des marges de la page HTML */
html {
    margin: 0em;
    padding: 0em;
}
 
/* definition du format du corps de la page */
body {
    margin: 0;
    padding: 0;
    min-width: 37.7em;                                                          /* environ 600px */
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
/* mise à zero des bordures et marges des elements de base de la page */
div, span, p, a, img, form, h1, h2, h3, h4, h5, h6 {
    border: 0em;
    padding: 0em;
    margin: 0em;
}
 
/**
 ****************************
 * Redefinition des tags HTML
 ****************************
 */
 
a {
    color: #014F61;                                                             /* couleur des liens par defaut */
    text-decoration: none;                                                      /* non souligne par defaut */
}
 
a:visited {
    color: #990000;
}
 
a:hover {
    text-decoration: underline;                                                 /* souligne lors du survol */
}
 
 
 
h1 {
    font-size: 1.63em;                                                          /* 26px */
    color: #014F61;
    margin: 0em;
    padding-top: 0.3em;
    padding-bottom: 0.5em;
    font-weight: normal;
    text-align: center;
}
 
p {
    font-size: 0.75em;                                                          /* 12px */
    line-height: 1.2em;
    text-align: justify;
}
 
/* conteneur */
#conteneur {
    float: left;
    width: 100%;
    background-image: url("../images/filet-double.gif");                        /* donne l illusion que le menu gauche continue jusqu en bas */
    background-position: 12em 0;                                                /* fond positionne a 12em du bord car le flux commence en dehors de l ecran */
    background-repeat: repeat-y;
    display: inline;                                                            /* evite le double margin bug d ie */
    margin-left: -12em;
}
 
#menuGauche {
    width: 12em;
    float: left;
    margin-left: 12em;                                                          /* permet de ramener la colonne de gauche de l ecran */
    display: inline;                                                            /* evite le double margin bug d'ie */
}
#menuGauche ul {
	font-size: 0.75em;
	padding: 0 0 1em 0;
}
 
 
 
#menuDroite {
    padding-left: 100%;                                                         /* sort le div de l ecran */
    margin-left: -12em;                                                         /* le ramene de sa largeur dans l ecran */
}
 
#menuDroite ul {
	font-size: 0.75em;
	padding: 0 0 0 0;
	margin:0 0 0 1.5em;
}
 
#contenu { min-width: 500px; background-color:red; overflow:auto;}
 
 
 
 
 
 table {
    background-color: #8DD2DC;
    width: auto;
    border-spacing: 0.1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
 
table caption {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5em;
}
 
table th {
    text-align: center;
    font-size: 0.75em;
}
 
table td {
    padding: 0.33em;
    font-size: 0.75em;
    background-color: #FFFFFF;
}
table td a {
    color: #014F61;
    font-weight: bold;
}
 
table td ul li {
    font-size: 1.3em;
}
 
caption {
    font-weight: bold;
    color: #014F61;
    font-size: 0.75em;
}
 
table.largeurMax {
    width: 100%;    
}
 
/* second style */
table.style1 {
    width: auto;
}
 
table.style1 th {
    margin: 0;
    padding: 0.13em 0 0.13em 0.31em;
    background-color: #8DD2DC;
    font-weight: bold;
}
 
table.style1 tr {
    font-size: 0.8em;
}
 
table.style1 tr.bleuClair {
    background-color: #E1F3F6;
}
 
table.style1 td {
    margin: 0;
    padding: 0.06em 0.13em 0.06em 0.13em;
}
 
table.style1 td a {
    color: #014F61;
    font-weight: bold;
}
 
/**
 ********************************
 * Styles personnalises (classes)
 ********************************
 */
 
table td.titre {
    background-color: #8DD2DC;
}
 
 
	</style>
</head>
<body>
<div id="principal">
    <div id="conteneur">
        <div id="menuGauche">
			<ul>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
				<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
					<ul>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
						<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					</ul>
				</li>
			</ul>
		</div>
        <div id="contenu">
            <div id="page">
                <h1>Psdfdfsdff df sqdfsdfsdfds sdf qssdffsdfsdfdf f sdf qsdfsdqf</h1>
	<p>sdfsqdfsdf sf sdf qsdf qsdf sdfqf sqdf sqdfqsdfsf qsq dsfzersfq dsqfs dfsqersfq sfqsdf <br /><br /></p>
	<table class="style1" summary="dsfg dfsg dfg dffg dfsg dsfg dsfg dfg dfg sdg sdfg etydf ">
			<caption>sdf qssdffsdfsdfdf f sdf qsdfsdqf</caption>
			<tr>
				<th colspan="4" scope="col" abbr="rezarezareza">Aaaaaaaaaaaa ccccccccccc</th>
			</tr>
			<tr>
				<th scope="col" abbr="Nnnnnnnn">bnbnvc</th>
				<th scope="col" abbr="tttttt">tttttttt tttttt tttttt</th>
				<th scope="col" abbr="iiiiiiiiii">Iiiiiiiiiiiii</th>
				<th scope="col" abbr="ddddddddddddd">DDDDDdddddddddd</th>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr><tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
			<tr>
				<td class="centre">1</td>
				<td>gfdsgsdg fg sdfg gfdg fg dfgdsfg dgf dgfsdfg dfgdfgdgf dfg </td>
				<td>fm hskdjg hmsdlfjkg hmdjkfshgkjdfghsedùgul ukdgf mjkds golsdfig lmdgf homdfigu ldkfgjlmdksj oidfgu lkdjg mdifgu ldkjg mdjklgh ùodiugf ùldkjfgù</td>
				<td>sfg fgjk hdmg</td>
			</tr>
 
</table>
 
 
 
 
			</div>
        </div>
    </div>
    <div id="menuDroite">
		<ul>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou            
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
			<li>kjkfdg dfhg kdjfgh jkfdgh kdfjg hmdfgou
				<ul>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
					<li><a href="#" title="ghjgh">ghlkj fghlj lfdklghjm fgh</a></li>
				</ul>
			</li>
		</ul>   
	</div>
</div>
</body>
</html>

peux tu juste m'aider pour cette scrollbar afin d'avoir un truc accessible.

Promis je t'embete plus après (enfin j'espere

)

merci

**Candygirl** · 28/05/2008, 14h51

pas besoin de min-width; je parlais du min-width pour le body.

Sur #content juste ça:

Code :

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

1
2
3
4
#contenu {
    overflow:auto;
    position:relative; /* qu'on puiss scroller sur IE7 */
}

+ donner le layout pour IE6 et règler les problèmes de positionnement.

Mais comme je l'ai dit plus bas c'est consultable mais tout sauf pratique = perso je ne le ferais pas.

Un min-width genre 50em sur le body est mieux.

**pop_up** · 28/05/2008, 16h37

merci beaucoup.

Cette solution de limiter le body ira très bien.

FF : tableau qui passe sous le menu de droite

Tableau en CSS

Discussions similaires

Partager

Partager