Présentation site sous IE 6 et suivants

**michel71** · 24/06/2015, 17h07

Bonjour à tous

Voila, je suis en cours de développement d'une nouvelle mouture de mon site
(suppression des cadres et passage en CSS)

Problème avec les anciennes versions de IE

Vous pouvez visualiser la page à cette adresse : http://www.france-timbre.fr/test/index.php
(cette page me servira de squelette pour le reste du site)

merci de votre aide

Ci-dessous les codes

CSS : style_page

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
/* CSS Document */
@font-face
{
 
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/*===========================================================================*/
@charset=utf-8;
 
body
{
	margin:auto;
	top:3px;
	background:#DCD8D6;
	width: 960px;
}
#header, #menu, #droite, #gauche, #centre, #footer
{
	background:#F9FCBE;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
}
/* ----- Entête  ----------*/
#header
{
	top:2px;
	height:180px;
	width: 960px;
 
}
#header .titre
{
	font-family:Dayrom,"Trebuchet MS", Arial, Helvetica, sans-serif;
	position:absolute;
	font-size:3em;
	top:50px;
	left:60px;
	color:#FF9933;
 
 
}
#header .sous_titre
{
	font-family:Dayrom,"Trebuchet MS", Arial, Helvetica, sans-serif;
	position:absolute;
	font-size:2em;
	top:100px;
	left:400px;
	color:#FF9933;
 
 
}
 
.image_haut
{
	position:absolute;
	top:15px; 
	left:225px;
}
/* ----- corps de la page  -----*/
#droite {
 
	position:relative;
	top:-12px;
	height:750px;
	width: 180px;
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;
 
}
#centre
{
	position:absolute;
	top:224px;
	margin-left:185px;
	height:750px;
	width: 590px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
 
}
#centre, p
{
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1.1em;
}
#gauche {
	position:absolute;
	top:224px;
	margin-left:780px;	
	height:750px;
	width: 180px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;
 
}
#gauche, p
{
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1.1em;
}
 
/* ~~ Styles de pied de page ~~ */
 
#footer 
{
	position:absolute;
	margin-left:3px;	
	top:980px;
	height:120px;
	width: 960px;
}
 
#footer .box_1 div
{
	margin-left:-770px;
}
 
#footer .box_2 div
{
	left:180px;
	top:5px;
}
 
/* Navigation */

CSS : style_menu_3

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
@charset "utf-8";
/* CSS Document */
#mbmcpebul_wrapper {
  padding: 0;
  border-style: solid;
  border-color: #12A034;
  border-width: 1px;
  border-radius: 5px;
  background-color: #F9FCBE;
  box-shadow: 0 0 5px -1px #333333, 0 1px 2px -1px #FFFFFF inset;
  border-collapse: separate;
  font-size: 0;
  line-height: 0;
  margin:auto;
}
 
#mbmcpebul_wrapper.quirks {
  margin-bottom: 0px;
  margin-right: 0px;
}
 
#mbmcpebul_wrapper.quirks #mbmcpebul_table ul li {
  width: 100%;
}
 
#mbmcpebul_table {
  margin: 0px;
  margin-bottom: -0px;
  margin-right: -0px;
  padding: 0;
  line-height: 0px;
  font-size: 0px;
  display: inline-block;
  width: auto;
}
 
#mbmcpebul_table li a {
  line-height: 16px;
  font-size: 13px;
  font-family: Arial,sans-serif;
  text-decoration: none;
  color: #080808;
  font-style: normal;
  font-weight: bold;
  padding: 12px 30px 12px 15px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
 
#mbmcpebul_table li div.buttonbg {
  height: 40px;
  width: 106px;
  line-height: 0;
  background-color: transparent;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}
 
#mbmcpebul_table li:hover div.buttonbg a, #mbmcpebul_table li.expanded a.topitem, #mbmcpebul_table li.active a.topitem,
#mbmcpebul_table li.itemhot a.topitem, #mbmcpebul_table li a:hover {
  color: #FFFFFF;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}
 
 
#mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
  background-color: transparent;
  box-shadow: 0 1px 2px -1px #FFFFFF inset;
}
 
#mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
  border-color: transparent;
}
 
#mbmcpebul_table li.first_button div.buttonbg {
  border-radius: 4px 0 0 4px;
}
 
#mbmcpebul_table li.last_button div.buttonbg {
  border-radius: 0 4px 4px 0;
}
 
#mbmcpebul_table ul li a {
  color: #196861;
  font-family: Arial,sans-serif;
  font-size: 12px;
  line-height: 15px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  display: block;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
 
#mbmcpebul_table ul li:hover > a {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
 
#mbmcpebul_table ul li.subexpanded a.subexpanded, #mbmcpebul_table ul li.subitemhot a.subitemhot, #mbmcpebul_table ul li a:hover {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
 
#mbmcpebul_table ul li:hover, #mbmcpebul_table ul li.subexpanded, #mbmcpebul_table ul li.subitemhot {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
 
#mbmcpebul_table ul {
  margin: 0;
  border-style: solid;
  border-color: #98B7E4;
  border-width: 0;
  padding: 0;
  background: transparent;
  font-size: 0;
  border-radius: 5px;
}
 
#mbmcpebul_table ul li a {
  padding: 7px 15px 7px 13px;
  text-align: left;
}
 
#mbmcpebul_table ul li.separator {
  padding: 7px;
  cursor: default;
  background: none;
  box-shadow: none;
  border-width: 0;
}
 
#mbmcpebul_table ul li.separator div {
  border-top: 1px solid #196861;
  font-size: 0px;
}
 
#mbmcpebul_table ul li {
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  height: auto;
  width: auto;
  text-align: left;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  float: none;
  margin: 0 0 0px 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  display: block;
}
 
#mbmcpebul_table ul li.first_item {
  border-radius: 5px 5px 0 0;
}
 
#mbmcpebul_table ul li.last_item {
  border-radius: 0 0 5px 5px;
}
 
 
#mbmcpebul_table ul {
  box-shadow: 0 0 7px -1px #666666;
}
 
#mbmcpebul_table a img {
  border: none;
}
 
#mbmcpebul_table li {
  list-style: none;
  float: left;
  margin: 0px 0px 0px 0px;
  padding: 0;
  float: left;
  display: inline-block;
}
 
#mbmcpebul_table.css_menu li {
  position: relative;
}
 
#mbmcpebul_table.css_menu ul li:hover > ul {
  opacity: 1;
}
 
#mbmcpebul_table.css_menu li:hover > ul {
  top: 100%;
  left: 0;
  right: auto;
  opacity: 1;
}
 
#mbmcpebul_table.css_menu ul li:hover > ul {
  top: -0px;
  left: 100%;
  right: auto;
}
 
#mbmcpebul_table.css_menu ul {
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-property:opacity;
  -webkit-transition-property:opacity;
  -moz-transition-property:opacity;
  -ms-transition-property:opacity;
  opacity: 0;
}
 
#mbmcpebul_table ul {
  position: absolute;
  top:-99999px;
  z-index: 4000;
}
 
#mbmcpebul_table ul ul {
  position: absolute;
  z-index: 5000;
}
 
#mbmcpebul_table .submenu_arrow {
  margin-left: 8px;
}
 
 
@media screen and (max-width: 500px) {
  #mbmcpebul_wrapper:not(.scripted) {
    text-align: center;
  }
 
  #mbmcpebul_wrapper:not(.scripted) #mbmcpebul_table li {
    float: none;
    vertical-align: top;
  }
}
 
#mbmcpebul_wrapper.centeritems {
  text-align: center;
}
 
#mbmcpebul_wrapper.centeritems #mbmcpebul_table li {
  float: none;
  vertical-align: top;
}
#mbmcpebul_table a.with_img_4 span.img_4x5, .mbmcpebul_menulist span.img_4x5 { 
  width: 4px; 
  height: 5px; 
  display: inline-block; 
  vertical-align: middle; 
}
 
#mbmcpebul_table li:hover > a span.img_4x5, #mbmcpebul_table li.subexpanded > a span.img_4x5 { 
  background-position: 0 -5px; 
} 
 
#mbmcpebul_table div.arrow { 
  background-image: url(ebab_mbmcp_d.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  height: 100%; 
} 
 
#mbmcpebul_table li:hover div.arrow, #mbmcpebul_table li.active div.arrow, #mbmcpebul_table li.expanded div.arrow, #mbmcpebul_table li.itemhot div.arrow { 
  background-image: url(ebab_mbmcp_d2.png); 
} 
 
#mbmcpebul_table div.arrow_1 { 
  background-image: url(ebab_mbmcp1_d.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  height: 100%; 
} 
 
#mbmcpebul_table li:hover div.arrow_1, #mbmcpebul_table li.active div.arrow_1, #mbmcpebul_table li.expanded div.arrow_1, #mbmcpebul_table li.itemhot div.arrow_1 { 
  background-image: url(ebab_mbmcp1_d2.png); 
} 
 
#mbmcpebul_table div.arrow_2 { 
  background-image: url(ebab_mbmcp2_d.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  height: 100%; 
} 
 
#mbmcpebul_table li:hover div.arrow_2, #mbmcpebul_table li.active div.arrow_2, #mbmcpebul_table li.expanded div.arrow_2, #mbmcpebul_table li.itemhot div.arrow_2 { 
  background-image: url(ebab_mbmcp2_d2.png); 
} 
 
#mbmcpebul_table div.arrow_3 { 
  background-image: url(ebab_mbmcp3_d.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  height: 100%; 
} 
 
#mbmcpebul_table li:hover div.arrow_3, #mbmcpebul_table li.active div.arrow_3, #mbmcpebul_table li.expanded div.arrow_3, #mbmcpebul_table li.itemhot div.arrow_3 { 
  background-image: url(ebab_mbmcp3_d2.png); 
} 
 
#mbmcpebul_table div.arrow_4 { 
  background-image: url(ebab_mbmcp4_d.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  height: 100%; 
} 
 
#mbmcpebul_table li:hover div.arrow_4, #mbmcpebul_table li.active div.arrow_4, #mbmcpebul_table li.expanded div.arrow_4, #mbmcpebul_table li.itemhot div.arrow_4 { 
  background-image: url(ebab_mbmcp4_d2.png); 
} 
 
#mbmcpebul_table div.arrow_5 { 
  background-image: url(ebab_mbmcp5_d.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  height: 100%; 
} 
 
#mbmcpebul_table li:hover div.arrow_5, #mbmcpebul_table li.active div.arrow_5, #mbmcpebul_table li.expanded div.arrow_5, #mbmcpebul_table li.itemhot div.arrow_5 { 
  background-image: url(ebab_mbmcp5_d2.png); 
} 
 
#mbmcpebul_table ul li a.with_arrow { 
  background-image: url(ebab_mbmcp_c.png); 
  background-repeat: no-repeat; 
  background-position: right center; 
  padding-right: 19px; 
} 
 
#mbmcpebul_table ul li a.with_arrow:hover, #mbmcpebul_table ul li:hover > a.with_arrow, #mbmcpebul_table ul li.subexpanded > a.with_arrow { 
  background-image: url(ebab_mbmcp_c2.png); 
} 
 
#mbmcpebul_table li:hover div.gradient40, #mbmcpebul_table li.expanded div.gradient40, #mbmcpebul_table li.active div.gradient40, #mbmcpebul_table li.itemhot div.gradient40 { 
  background-image: url('buttonhot_bg.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table li:hover div.gradient_button, #mbmcpebul_table li.expanded div.gradient_button, #mbmcpebul_table li.active div.gradient_button, #mbmcpebul_table li.itemhot div.gradient_button { 
  background-image: -moz-linear-gradient(top, #E9F4F5 0%, #ACDBDD 100%); 
  background-image: -webkit-linear-gradient(top, #E9F4F5 0%, #ACDBDD 100%); 
  background-image: linear-gradient(top, #E9F4F5 0%, #ACDBDD 100%); 
} 
 
#mbmcpebul_table ul.gradient87 { 
  background-image: url('menu_bg.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table ul.gradient232 { 
  background-image: url('menu_bg4.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table ul.gradient174 { 
  background-image: url('menu_bg5.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table ul.gradient145 { 
  background-image: url('menu_bg1.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table ul.gradient116 { 
  background-image: url('menu_bg6.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table ul.gradient377 { 
  background-image: url('menu_bg2.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table ul.gradient58 { 
  background-image: url('menu_bg3.png'); 
  background-repeat: repeat-x; 
  background-color: #ACDBDD; 
} 
 
#mbmcpebul_table ul.gradient_menu { 
  background-image: -moz-linear-gradient(top, #E9F4F5 0%, #ACDBDD 100%); 
  background-image: -webkit-linear-gradient(top, #E9F4F5 0%, #ACDBDD 100%); 
  background-image: linear-gradient(top, #E9F4F5 0%, #ACDBDD 100%); 
} 
 
#mbmcpebul_table ul li.gradient29:hover, #mbmcpebul_table ul li.gradient29.subexpanded, #mbmcpebul_table ul li.gradient29.subitemhot { 
  background-image: url('menuitemhot_bg.png'); 
  background-repeat: repeat-x; 
  background-color: #23716C; 
} 
 
#mbmcpebul_table ul li.gradient_menuitem:hover, #mbmcpebul_table ul li.gradient_menuitem.subexpanded, #mbmcpebul_table ul li.gradient_menuitem.subitemhot { 
  background-image: -moz-linear-gradient(top, #74C1C6 0%, #23716C 100%); 
  background-image: -webkit-linear-gradient(top, #74C1C6 0%, #23716C 100%); 
  background-image: linear-gradient(top, #74C1C6 0%, #23716C 100%); 
} 
 
#mbmcpebul_table li a.button_1, #mbmcpebul_table li div a.button_1 { 
  color: #212121; 
} 
 
#mbmcpebul_table li.expanded a.button_1, #mbmcpebul_table li.active a.button_1, #mbmcpebul_table li.itemhot a.button_1, #mbmcpebul_table li:hover div.buttonbg a.button_1, #mbmcpebul_table li div.buttonbg a.button_1:hover { 
  color: #FFFFFF; 
  font-style: italic; 
} 
 
#mbmcpebul_table li a.button_2, #mbmcpebul_table li div a.button_2 { 
  color: #0F0F0F; 
} 
 
#mbmcpebul_table li.expanded a.button_2, #mbmcpebul_table li.active a.button_2, #mbmcpebul_table li.itemhot a.button_2, #mbmcpebul_table li:hover div.buttonbg a.button_2, #mbmcpebul_table li div.buttonbg a.button_2:hover { 
  color: #FFFFFF; 
} 
 
#mbmcpebul_table li a.button_3, #mbmcpebul_table li div a.button_3 { 
  color: #171717; 
} 
 
#mbmcpebul_table li.expanded a.button_3, #mbmcpebul_table li.active a.button_3, #mbmcpebul_table li.itemhot a.button_3, #mbmcpebul_table li:hover div.buttonbg a.button_3, #mbmcpebul_table li div.buttonbg a.button_3:hover { 
  color: #FFFFFF; 
} 
 
#mbmcpebul_table li a.button_4, #mbmcpebul_table li div a.button_4 { 
  color: #141414; 
} 
 
#mbmcpebul_table li.expanded a.button_4, #mbmcpebul_table li.active a.button_4, #mbmcpebul_table li.itemhot a.button_4, #mbmcpebul_table li:hover div.buttonbg a.button_4, #mbmcpebul_table li div.buttonbg a.button_4:hover { 
  color: #121212; 
} 
 
#mbmcpebul_table li a.button_7, #mbmcpebul_table li div a.button_7 { 
  color: #000000; 
} 
 
#mbmcpebul_table li.expanded a.button_7, #mbmcpebul_table li.active a.button_7, #mbmcpebul_table li.itemhot a.button_7, #mbmcpebul_table li:hover div.buttonbg a.button_7, #mbmcpebul_table li div.buttonbg a.button_7:hover { 
  color: #FFFFFF; 
} 
 
#mbmcpebul_table li a.button_8, #mbmcpebul_table li div a.button_8 { 
  color: #000000; 
} 
 
#mbmcpebul_table li.expanded a.button_8, #mbmcpebul_table li.active a.button_8, #mbmcpebul_table li.itemhot a.button_8, #mbmcpebul_table li:hover div.buttonbg a.button_8, #mbmcpebul_table li div.buttonbg a.button_8:hover { 
  color: #FFFFFF; 
}

Code php

Code php :

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
<?php
session_start();
$_SESSION['chemin']="";
require_once("connex_base/connex_base_gene.php");
$_SESSION['lien']=$_SESSION["adresse_site"]."index.php";
$_SESSION['page']=$_SESSION['lien'];
if(!isset($_SESSION['pseudo'])) $_SESSION['pseudo']="";
//include ('script_php/lecture_stat.php');
?>
<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
        <title>Présentation des timbres français, de la philétalie et des collections</title>
		<meta name="description" content="Les timbres postaux ou fiscaux sont collectionnés par des philatélistes qui les classent, les étudient et les rangent dans des classeurs ">
		<META NAME="robots" CONTENT="all">
		<META NAME="REVISIT-AFTER" CONTENT="3 days">
               <!--[if lte IE 7]>
 
        <link rel="stylesheet" href="style_ie.css" />
 
        <![endif]-->
 
    	<link rel="stylesheet" href="css/style_page.css" media="all" type="text/css"/>
    	<link rel="stylesheet" href="css/style_menu_3.css" media="all" type="text/css"/>
      <!--[if lt IE 7]>
        <script type="text/javascript">
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
            sfHover = function() {
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                        this.className += " sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
        <style type="text/css">
            #monmenu li {width: 144px;}
        </style>
     <![endif]-->
</head>
<body>
<!-- ====================================== header ===================-->
 	 <div id="header">
		<div class="image_haut" ><img src="images_site/fond_entete_1.jpg" alt="Timbres de France">
        <div class="titre"> France&nbsp;Timbres </div>
        <div class="sous_titre"> Philatélie, collections </div>
        </div>
 
	 </div><!-- fin de id header -->
<!-- =========================================================-->
<div id="mbmcpebul_wrapper" style="max-width: 960px;">
  <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
  <li class="first_button"><div class="buttonbg gradient_button gradient40" style="width: 96px;"><div class="arrow"><a class="button_1">Général</a></div></div>
    <ul class="gradient_menu gradient87">
    <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'index.php">Accueil</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'contact.php">Contact</a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'dispo_manco/echange.php">Echanges</a>');?></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 115px;"><div class="arrow_1"><a class="button_2">Collections</a></div></div>
    <ul class="gradient_menu gradient145">
    <li class="gradient_menuitem gradient29 first_item"><a class="with_arrow" title="">France</a>
      <ul class="gradient_menu gradient377">
      <li class="gradient_menuitem gradient29 first_item"><a class="with_arrow" title="">Classique et courant</a>
        <ul class="gradient_menu gradient58">
        <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/classique/annee_1849.php">Par année</a>');?></li>
        <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/classique/classique_1_a_7.php">Par numéro</a>');?></li>
        </ul></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/aerien/aerien_1_a_15.php">Aérien</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/bloc_souvenir/bloc_souv_1_a_5.php">Blocs</a>');?></li>
      <li class="gradient_menuitem gradient29"><a class="with_arrow" title="">Autoadhésif</a>
        <ul class="gradient_menu gradient58">
        <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/adhesif/annee_1990_1996.php">Par année</a>');?></li>
        <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/adhesif/adhesif_1_a_33.php">Par numéro</a>');?></li>
        </ul></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/colis/colis_page_1.php">Colis (timbres pour)</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/LVF/page_1.php">LVF (Légion des volontaires français)</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/greve/greve_page_1.php">Gréve (vignettes)</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/guerre/page_1.php">Guerre 14-18</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/service/service_1_a_52.php">Service (timbres de)</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/souvenir/souv_1_a_10.php">Souvenirs</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/taxe/ta_1_a_50.php">Taxe</a>');?></li>
      <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/ballons/ballon-1.php">Ballons montés</a>');?></li>
      <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/france/franchise/franchise_1.php">Franchise militaire</a>');?></li>
      </ul></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/andorre/andorre_presentation.php">Andore français</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/monaco/monaco_presentation.php">Monaco</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/st_pierre/sp_presentation.php">St Pierre et Miquelon</a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/wallis/wallis_presentation.php">Wallis et Futuna</a>');?></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 120px;"><div class="arrow_2"><a class="button_3">Ex Colonies</a></div></div>
    <ul class="gradient_menu gradient232">
    <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/issas/issas_1.php">Afars et Issas </a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/algerie/algerie_presentation.php">Algérie </a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/benin/benin_presentation.php">Bénin </a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/cote_ivoire/cote_ivoire_presentation.php">Cote d\'Ivoire </a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/djbouti/djbouti_1.php">Djibouti </a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/maroc/maroc_1.php">Maroc </a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/obock/obock_1.php">Obock </a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'collection/senegal/senegal_1.php">Sénégal </a>');?></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40"><div class="arrow_3"><a class="button_4">Philatélie</a></div></div>
    <ul class="gradient_menu gradient174">
    <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'philatelie/graveurs/grav.php">Graveurs</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'philatelie/lexique.php">Lexique</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'philatelie/estimation.php">Estimer votre collection</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'philatelie/qualite.php">Nomes qualités</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'philatelie/materiel.php">Conseils</a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'philatelie/tarif_postal.php">Les tarifs postaux</a>');?></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 107px;"><div class="arrow_4"><a>Annonces</a></div></div>
    <ul class="gradient_menu gradient87">
    <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'annonce/affiche_annonce.php">Voir les annonces</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'annonce/saisie_annonce.php">Créer une annonce</a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'annonce/connexion_annonce.php">Modifier / supprimer une annconce</a>');?></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 81px;"><div class="arrow_4"><a>Outils</a></div></div>
    <ul class="gradient_menu gradient58">
    <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'recherche/mot_recherche.php">Moteur de recherche</a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'recherche/classement_cote.php">Classement des timbres par cote</a>');?></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 149px;"><div class="arrow_5"><a class="button_7">Téléchargement</a></div></div>
    <ul class="gradient_menu gradient116">
    <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'telechargement/evaluation.php">LOGItimbres évaluation</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'telechargement/achat_logitimbre.php">Achat LOGItimbres</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'telechargement/telecharg-complet-MAJ.php">Mises à jour LOGItimbres</a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'telechargement/feuilles.php">Feuilles pour classeur</a>');?></li>
    </ul></li>
  <li class="last_button"><div class="buttonbg gradient_button gradient40" style="width: 129px;"><div class="arrow_5"><a class="button_8">Votre compte</a></div></div>
    <ul class="gradient_menu gradient145">
    <li class="gradient_menuitem gradient29 first_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'personnel/connexion.php">Connexion</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'personnel/identification.php">Création</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'personnel/modif_info_perso.php">Modification</a>');?></li>
    <li class="gradient_menuitem gradient29"><?php echo('<a href="'.$_SESSION['adresse_site'].'personnel/suppression_compte.php">Suppression</a>');?></li>
    <li class="gradient_menuitem gradient29 last_item"><?php echo('<a href="'.$_SESSION['adresse_site'].'gestion_collec/affiche_fiche_new.php">Gérer votre collection</a>');?></li>
    </ul></li>
  </ul>
</div>        
 
      	<div id="droite" align="center">
          <p>&nbsp;</p>	
		  <p><?php @include('pub/bandeau_pub_droit.html'); ?></p>         
         </div><!-- fin de id droite -->
 
    	<div id="centre">
         <p>centre</p>
         </div><!-- fin de id centre -->
 
     	<div id="gauche">
        <p>gauche</p>
        </div><!-- fin de id gauche -->
 
     	<div id="footer">
        	<div class="box_1">
        	   <div  align="center"><?php echo'<a href="'.$_SESSION['adresse_site'].'annonce/affiche_annonce.php">Annonces </a>'?></div>
   			   <div align="center"><?php echo'<a href="'.$_SESSION['adresse_site'].'collection/france/classique/classique_1_a_7.php">Collection France classique</a>'?></div>
    		   <div align="center"><?php echo'<a href="'.$_SESSION['adresse_site'].'philatelie/graveurs/grav.php">Les graveurs </a>'?></div>
   			   <div align="center"><?php echo'<a href="'.$_SESSION['adresse_site'].'recherche/classement_cote.php">Classement par cote</a>'?></div>
       		</div><!-- fin de id box_1 -->
 
 
            <div class="box_2">
               <div><?php echo'<a href="'.$_SESSION['adresse_site'].'contact.php">Contact </a>'?></div>
               <div><?php echo'<a href="'.$_SESSION['adresse_site'].'collection/andorre/andorre_presentation.php">Collection Andorre</a>'?></div>
               <div><?php echo'<a href="'.$_SESSION['adresse_site'].'philatelie/lexique.php">Lexique </a>'?></div>
               <div><?php echo'<a href="'.$_SESSION['adresse_site'].'telechargement/achat_logitimbre.php">Achat LOGItimbres</a>'?></div>
			</div><!-- fin de id box_2 -->
 
 
 
        </div><!-- fin de id footer -->
 
</body>
</html>

Invité · 24/06/2015, 19h21

Bonjour Michel,

1/ Pour ton menu, je t'invite à t'inspirer de celui-ci : http://codepen.io/jreaux62/pen/dPxKKQ
Le HTML est simplifié au maximum, et le menu est "responsive" et adapté à une utilisation "moderne" (smartphone ou tablette tactile).

Un conseil : (si possible) SIMPLIFIE ton MENU !
Beaucoup trop de rubriques/sous-rubriques/sous-sous-rubriques !!

2/ Tant qu'à BIEN faire, évite de reprendre des anciennes classes... avec des noms non-appropriés (ex.: class .mbmcpebul_table pour un ul... )
Refais tout à neuf, en repartant de zéro.

3/ Il existe des balises spécifiques (HTML/HTML5) :
ex.

Code :

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

1
2
3
4
5
<div id="header">
        <div class="image_haut" ><img src="images_site/fond_entete_1.jpg" alt="Timbres de France">
        <div class="titre"> France&nbsp;Timbres </div>
        <div class="sous_titre"> Philatélie, collections </div>
</div>

à remplacer par :

Code :

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

1
2
3
4
5
<header id="header">
        <figure class="image_haut" ><img src="images_site/fond_entete_1.jpg" alt="Timbres de France"></figure>
        <h1 class="titre"> France&nbsp;Timbres </h1>
        <h2 class="sous_titre"> Philatélie, collections </h2>
</header>

Pour info : les balises de titres <h1>, <h2>,... >h6> sont très importantes pour un bon référencement.
De même que mettre des mots-clés ou parties de phrases en gras (balises <strong>).

**michel71** · 24/06/2015, 22h45

Merci, je vais regarder tout ça

y'a du boulot

A+

**michel71** · 25/06/2015, 14h57

Bonjour,

Bon je vais surement passer pour un guignole mais ....

j'ai "récupéré" les fichiers html, css et js

j'ai créé une page test pour voir le résultat et c'est pas terrible. En effet je pense que le script JS ne fonctionne pas.
pourquoi ??

Il est visible dans la page "test" à cette adresse http://www.france-timbre.fr/test/test.php

j'avoue que je ne connais pas du tout le JS

Voila je suis un peu bloqué

Merci pour votre aide

Invité · 25/06/2015, 16h09

Oups !
Mea culpa.

J'ai oublié de spécifier qu'il fallait le script d'initialisation de jQuery (à mettre entre les balises <head>...</head>) :

Code html :

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

1
2
<!-- initialisation jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

**michel71** · 30/06/2015, 23h08

Bonsoir,

Bon j'ai travaillé sur le menu proposé.
Problème le menu se déploie derrière les blocs

le 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
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
<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
        <title>Présentation des timbres français, de la philétalie et des collections</title>
		<meta name="description" content="Les timbres postaux ou fiscaux sont collectionnés par des philatélistes qui les classent, les étudient et les rangent dans des classeurs ">
		<META NAME="robots" CONTENT="all">
		<META NAME="REVISIT-AFTER" CONTENT="3 days">
             <!--[if lte IE 7]>
       			 <link rel="stylesheet" href="css/style_ie.css" />
       		 <![endif]-->
             <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
 
             <!--[if lt IE 7]>
        <script type="text/javascript">
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
            sfHover = function() {
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                        this.className += " sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
        <style type="text/css">
            #monmenu li {width: 144px;}
        </style>
     <![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js.jsp"></script>
 
    	<link rel="stylesheet" href="css/style_page.css" media="all" type="text/css"/>
        <link rel="stylesheet" href="css/style_ie.css" media="all" type="text/css"/>
        <link rel="stylesheet" href="css/css_menu.css" media="all" type="text/css"/>
<style type="text/css">
<!--
#gauche .Bvie
{
        position:absolute;
        top: 5px;
    height: 300px;
    text-align: justify;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 5px;
    color: #FFFFCC;
    font-size: 1.1em;
        width:155px;
        margin-left:4px;
}
#gauche .Bvie a
{
    color:#FF0;
}
#gauche .stat
{
        position:absolute;
        top: 310px;
        padding: 5px;
 
}
-->
</style>
 
 
 
</head>
<body>
<!-- ====================================== header ===================-->
 	 <header id="header">
		<div class="image_haut" ><img src="images_site/fond_entete_2.jpg" alt="Timbres français">
	 </header><!-- fin de id header -->
<!-- =========================================================-->
 
 
<nav id="navMain">
    <ul>    
 
        <li>
            <a href="#">Général</a>
            <ul>
                <li>
                    <a href="#">Accueil</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
                <li>
                    <a href="#">Echange</a>
                </li>
            </ul>
        </li>
 
 
        <li>
            <a href="#">Collections</a>
            <ul>
                <li>
                    <a href="#">France classique</a>
                    <ul>
                        <li>
                            <a href="#">Par année</a>
                        </li>
                        <li>
                            <a href="#">Par numéro</a>
                        </li>
					</ul>
				</li>				
                <li>
                    <a href="#">Andorre français</a>
                </li>
                <li>
                    <a href="#">Monaco</a>
                </li>
                <li>
                    <a href="#">St Pierre et Miquelon</a>
                </li>
                <li>
                    <a href="#">Wallis et Futuna</a>
                </li>
				<li>
                    <a href="#">Ex colonies</a>
			         <ul>
                        <li>
                            <a href="#">Afars et Issas</a>
                        </li>
                        <li>
                            <a href="#">Algérie</a>
                        </li>
                        <li>
                            <a href="#">Benin</a>
                        </li>
                        <li>
                            <a href="#">Cote d'Ivoire</a>
                        </li>
                        <li>
                            <a href="#">Djibouti</a>
                        </li>
                        <li>
                            <a href="#">Maroc</a>
                        </li>
                        <li>
                            <a href="#">Obock</a>
                        </li>
                        <li>
                            <a href="#">Sénégal</a>
                        </li>
					</ul>
				</li>	
            </ul>
        </li>
 
        <li>
            <a href="#">Philatélie / Annonces</a>
            <ul>
                <li>
                    <a href="#">Graveur</a>
                </li>
                <li>
                    <a href="#">Lexique</a>
                </li>
                <li>
                    <a href="#">Estimer votre collection</a>
                </li>
					<li>
                    <a href="#">Annonces</a>
                    <ul>
                        <li>
                            <a href="#">Voir les annonces</a>
                        </li>
                        <li>
                            <a href="#">Créer une annonce</a>
                        </li>
                        <li>
                            <a href="#">Modifier/supp annonce</a>
                        </li>
                        <li>
                            <a href="#">Feuilles pour classeur</a>
                        </li>
					</ul>
            	</li>
			</ul>
        </li>
 
        <li>
            <a href="#">Outils / téléchargement</a>
            <ul>
                <li>
                    <a href="#">Moteur de recherche</a>
                </li>
                <li>
                    <a href="#">Classement par cote</a>
                </li>
                <li>
                    <a href="#">Téléchargement</a>
                    <ul>
                        <li>
                            <a href="#">LOGItimbres éval</a>
                        </li>
                        <li>
                            <a href="#">Achat LOGItimbre</a>
                        </li>
                        <li>
                            <a href="#">MAJ LOGItimbre</a>
                        </li>
                        <li>
                            <a href="#">Feuilles pour classeur</a>
                        </li>
					</ul>
                </li>
            </ul>
        </li>
 
 
    </ul>
</nav>
 
 
      	<div id="droite" align="center">
          <p>&nbsp;</p>	
		  <p><script type="text/javascript"><!--
google_ad_client = "ca-pub-0489429450801644";
/* skyscraper large monaco */
google_ad_slot = "6319745203";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>         
         </div><!-- fin de id droite -->
 
    	<div id="centre">
 
        	<div>
       			 <img src="images_site/0003.jpg" height="80" width="65" alt="Premier timbre français"/>  
                <h2>Le 1er timbre de la France, le 20 cts. Cérès de 1849 </h2>
 
                <p>Ce site est destiné à tous les amoureux des timbres. Il a été créé pour fournir un maximum informations au plus grand nombre. Il présente tous les timbres français depuis 1849 à nos jours. Plusieurs collections sont à votre disposition pour évaluer vos timbres. Chaque timbre est réprésenté par une image avec toutes les informations qui retrace toute son histoire. Le site met à votre disposition des outils pour classer, estimer, échanger, vos timbres.</p>
  				<p> Le site vous offre la possibilité de gérer gratuitement une collection dans votre espace personnel, vous pouvez également télécharger des feuilles de classement pour votre collection.  Toujours gratuitement vous pouvez passer des annonces pour échanger, vendre ou rechercher des pièces qui vous manquent.  </p> 
                <p> la valeur d'un timbre n'est pas forcément liée à son ancienneté. les critères qui régissent la valeur sont en premier lieu la rareté, l'absence de défaut, la fraicheur, la couleur et son histoire. De toutes façons il faut être conscient que la cote est déterminée en partie par l'offre et la demande   </p>             
         <p>Si vous êtes une de ces personnes qui avez hérité d’une collection ou d’une accumulation de timbres anciens et que vous n’avez pas la moindre idée de ce que ça vaut, commencez par l’hypothèse où cette collection ou accumulation de timbres ne vaut sans doute pas grand-chose. De cette façon, vous ne serez pas déçus quand vous découvrirez que la collection de timbres que vous a donnée votre grand-père ne va pas payer votre nouvelle voiture. Par contre si le contraire se révèle être vrai, alors tant mieux ! C’est que la chance existe et vous a sourit.</p>
         	</div>
         </div><!-- fin de id centre -->
 
     	<div id="gauche">
 
			<div class="Bvie" style="overflow:auto;">
				     <h2>la vie du site</h2>
                     <p>28/04/2015 <a href="gestion_collec/explications.php">Nouvelle pr&eacute;sentation des collections personnelles</a> </p>
              		 <p>14/04/2015 <a href="collection/france/classique/annee_2015.php">Ajout de quelques timbres de 2015 </a></p>
					 <p> Le 20/12/2014 ajout de <a href="collection/pag2014.php">nouveaux timbres 2014</a> </p>
                     <p>Le 08/12/2014 ajout des <a href="collection/wallis/wallis_2012.php">timbres de Wallis et Futuna 2012-2013-2014 </a></p>
                     <p> Le 02/12/2014 ajout des <a href="collection/st_pierre/st_pierre-2013.php">timbres de Saint Pierre et Miquelon 2013 et 2014</a></p> 
                      <p >Le 08/11/2014 ajout des <a href="collection/MONACO/monaco-2013.php">timbres de Monaco 2013 et 2014 </a></p>
                      <p >Le 29/09/2014 ajout des <a href="collection/pag2014.php">premiers timbes courants 2014 </a></p>
                      <p >Le 16/09/2014 ajout des <a href="collection/adhesif/adhesif_2014.php">premiers timbes autadh&eacute;sifs 2014 </a></p>
                      <p >Le 26/04/2014 ajout des <a href="collection/adhesif/adhesif_2013.php">timbres autadh&eacute;sifs 2013</a> </p>
                      <p >Le 26/04/2014 <a href="collection/pag2013.php">ajout des timbres 2013 </a></p>
                      <p >Le 05/05/2013 Ajout des <a href="collection/pag2013.php">premiers timbres de 2013 </a></p>
                      <p >Le 25/11/2012 ajout des <a href="collection/wallis/accueil_walls.php">timbres de Wallis et Futuna</a> </p>
                      <p >Le 30/10/2012 ajout des timbres Monaco <a href="collection/MONACO/monaco-2011.php">ann&eacute;e 2011 et 2012 </a></p>
                      <p >Le 27/10/2012 ajout des timbres Saint Pierre et Miquelon <a href="collection/st_pierre/st_pierre-829.php">ann&eacute;es 2005 &agrave; 2011 </a></p>
                      <p >Le 25/10/2012 ajout des timbres <a href="collection/pag2012-1.php">fran&ccedil;ais classiques</a> et <a href="collection/adhesif/adhesif_2012.php">adh&eacute;sifs 2012</a> </p>
                      <p >Le 15/08/2012 ajout des timbres <a href="collection/andorre/andorre-aerien.php">a&eacute;rien et taxe Andorre fran&ccedil;ais</a> </p>
                      <p >Le 12/05/2012 ajout des premiers timbres <a href="collection/andorre/accueil_andorre.php">Andorre fran&ccedil;ais</a> </p>
                      <p >Le 19/03/2011 ajout des <a href="collection/pag2011-1.php">premiers timbres 2011</a> </p>
                      <p >Le 27/10/2010 ajout des <a href="collection/bloc_cnep/cnep-1.php">blocs C.N.E.P</a> </p>
                      <p >Le 26/10/2010 ajout des timbres de la <a href="collection/LVF/lvf-1.php">L.V.F</a> et de la <a href="collection/shaef/shaef-1.php">S.H.A.E.F </a></p>
                      <p >Le 13/10/2010 <a href="collection/greve/greve-6.php">mise en ligne de quelques vignettes de gr&egrave;ve non r&eacute;f&eacute;renc&eacute;es </a></p>
                      <p >Le 09/06/2010 <a href="collection/bloc_souvenir/bloc-1_4.php">mise en ligne de la cat&eacute;gorie des blocs et souvenirs</a> </p>
                      <p >Le 21/03/2010 <a href="collection/pag2010-0.php">les premiers timbres de 2010 </a></p>
                      <p >Le 09/03/2010 ajout de la cat&eacute;gorie des<a href="collection/adhesif/adhesif_1990-1996.php"> timbres autoadh&eacute;sifs </a></p>
                      <p >Le 23/06/2009 ajout des <a href="collection/pag2009-1.php">derniers timbres &eacute;mis de 2009</a> </p>
                      <p >Le 10/03/2009 ajout des premiers<a href="collection/pag2009-0.php"> timbres de 2009 </a></p>
                      <p >Le 29/09/2008 suite  des <a href="collection/pag2008-suite-1.php">timbres de 2008</a> </p>
                      <p >Le 24/04/2008 ajout des premiers <a href="collection/pag2008.php">timbres de 2008</a> </p>
                      <p >Le 31/12/2007 ajout des derniers <a href="collection/pag2007.php">timbres de 2007</a> et mise &agrave; jour des fiches </p>
                      <p >Le 10/07/2007 Vous pouvez maintenant cr&eacute;er des listes de manquants ou dispo et les joindre &agrave; votre annonce. Pour plus d'explications<a href="espace-perso/accueil-perso.php"> rendez vous sur cette page </a></p>
                      <p >Le 02/07/2007 ajout des nouveaux<a href="collection/pag2007-suite-3.php"> timbres de 2007 </a></p>
                      <p ><font size="2">Bonne nouvelle</font>, vous pouvez &agrave; nouveau cr&eacute;er et g&eacute;rer votre  collection en ligne et ce TOUJOURS gratuitement. Pour ouvrir &agrave; nouveau cet  espace j'ai &eacute;t&eacute; oblig&eacute; de modifier profond&eacute;ment le programme aussi si vous  constatez un bug veuillez m'en avertir en utilisant la page &quot;m'&eacute;crire&quot;  et soyez indulgent. Merci et bonne visite </p>
                      <p >Le 23/04/2007 ajout des<a href="collection/greve/greve-1.php"> timbres de gr&egrave;ve </a></p>
                      <p >Le 08/04/2007 ajout de quelques <a href="http://perso.orange.fr/cachets-obliteration/">cahets premiers jour</a> </p>
                      <p >Le 11/3/2007 ajout de 10 pages des timbres <a href="collection/colonies_francaise/tunisie/tunisie-1.php">coloniaux fran&ccedil;ais de la Tunisie </a></p>
                      <p >Le 05/03/2007 ajout des premiers <a href="collection/pag2007.php">timbres de l'ann&eacute;e 2007 </a></p>
                      <p >Le 15/01/2007 ajout des pages des timbres <a href="collection/colonies_francaise/maroc/maroc-1.php">coloniaux fran&ccedil;ais du Maroc </a></p>
                      <p >Le 19/12/2006 ajout des pages des timbres <a href="collection/colonies_francaise/algerie/algerie-1.php">coloniaux fran&ccedil;ais de l'Alg&eacute;rie </a></p>
                      <p >Le 31/10/2006 mise &agrave; jour des <a href="collection/pag2006.php">premiers timbres de 2006 </a></p>
                      <p >Le 25/10/2006 mise &agrave; jour de la page des<a href="collection/pag2005.php"> timbres de 2005</a> (num&eacute;rotation Yvert et Tellier)</p>
                      <p >Le 16/10/2006 ajout des pages sur les timbres <a href="collection/colonies_francaise/senegal/senegal-1.php">coloniaux fran&ccedil;ais du S&eacute;n&eacute;gal </a></p>
                      <p >Le 06/10/2006 un d&eacute;but de collection sur les ex-colonies fran&ccedil;aises <a href="collection/colonies_francaise/corne-afrique.php">visible &agrave; cette adresse </a></p>
                      <p >Le 09/082006 ajout des pages concernant l'&eacute;pop&eacute;e   des balons mont&eacute;s et autres astuces pour faire parvenir du courrier &agrave; Paris pendant le si&egrave;ge de 1870
                        (<a href="collection/ballons/ballon-1.php">page ballons mont&eacute;s</a>) </p>
                      <p >Le 15/07/2006 vous pouvez t&eacute;l&eacute;charger une version de d&eacute;monstration de mon logiciel de gestion de collection. Avec ce logiciel vous pouvez g&eacute;rer un nombre illimit&eacute; de collections et de fiches et chaque collection est valoris&eacute;e, cr&eacute;er vos dispolistes et mancolistes, les exporter au format Excel, vous avez &agrave; votre disposition une base de donn&eacute;es de plus de 4000 photos et informations </a></span></p>
                      <p >Pour ceux qui trouvent ce site sympa et interessant vous pouvez maintenant me laisser un petit message sur<a href="livre-dor.php"> le livre d'or </a></p>
                      <p >Le 26/05/2006 ajout dans les collections des timbres pour colis postaux et petits colis (<a href="collection/accueil-collection.php">dans le menu sur la page &quot;collection&quot;</a>)                        </p>
                      <p >Le 27/06/2005 Ouverture du site.</p>
					  <p align="justify">
    		</div> <!-- fin de class=Bvie -->
 
                <div class="stat">   
           					 <p>&nbsp;</p>
				<font color="#000000" size="2">Visiteurs :4. 092. 247</font> <br>
				<font color="#00000" size="2"> Pages :120. 996. 244</font>	<br>
				<font color="#000000" size="2">Membres : 5679</font><br>					
				<font color="#000000" size="2">Collections gérées : 241</font><br>							
				<font color="#000000" size="2">Pages aujourd'hui : 21</font><br>	
 
        <p>&nbsp;</p>
        				<a href="http://127.0.0.1/france-timbre/test_menu/menu.php">Menu </a> ?><br>	
 
        		</div> <!-- fin de class stat -->
 
        </div><!-- fin de id gauche -->
 
     	<footer id="footer">
 
        	<div class="box_1">
        	   <div  align="center"><a href="http://127.0.0.1/france-timbre/annonce/affiche_annonce.php">Annonces </a><br>
   			   <a href="http://127.0.0.1/france-timbre/collection/france/classique/classique_1_a_7.php">Collection France classique</a><br>
    		   <a href="http://127.0.0.1/france-timbre/philatelie/graveurs/grav.php">Les graveurs </a><br>
   			   <a href="http://127.0.0.1/france-timbre/recherche/classement_cote.php">Classement par cote</a>       		</div><!-- fin de id box_1 -->
 
 
            <div class="box_2">
               <div align="center"><a href="http://127.0.0.1/france-timbre/contact.php">Contact </a><br>
               <a href="http://127.0.0.1/france-timbre/collection/andorre/andorre_presentation.php">Collection Andorre</a><br>
               <a href="http://127.0.0.1/france-timbre/philatelie/lexique.php">Lexique </a><br>
               <a href="http://127.0.0.1/france-timbre/telechargement/achat_logitimbre.php">Achat LOGItimbres</a></div>
			</div><!-- fin de id box_2 -->
 
    		<div class="box_3">
    			<div align="center"><a href="http://127.0.0.1/france-timbre/dispo_manco/echange.php">Echanges </a><br>
    			<a href="http://127.0.0.1/france-timbre/collection/monaco/monaco_presentation.php">Collection Monaco</a><br>
   				<a href="http://127.0.0.1/france-timbre/philatelie/qualite.php">Qualité </a><br>
    			<a href="http://127.0.0.1/france-timbre/telechargement/evaluation.php">Démo LOGItimbres</a></div>
			</div><!-- fin de id box_3 -->
 
 
        </footer><!-- fin de id footer -->
 
</body>
</html>

Le code css de la page général

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
/* CSS Document */
@font-face
{
 
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/*===========================================================================*/
@charset=utf-8;
 
body
{
	margin:auto;
	top:3px;
	background:#DCD8D6;
	width: 960px;
}
h1
{
font-size:1.8em;
}
h2
{
font-size:1.3em;
}
h3
{
font-size:1.1em;
}
h4
{
font-size:0.9em;
}
 
#header, #menu, #droite, #gauche, #centre, #footer
{
	background:#F9FCBE;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
}
/* ----- Entête  ----------*/
#header
{
	top:2px;
	height:180px;
	width: 960px;
 
}
 
#header .image_haut
{
	position:relative;
	top:15px; 
	left:30px;
}
/* effet zoom sur image */
img.zoomEffect {
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
img.zoomEffect:hover {
    -moz-transform: rotate(0deg) scale(1.80);
    -webkit-transform: rotate(0deg) scale(1.80);
    -o-transform: rotate(0deg) scale(1.80);
    -ms-transform: rotate(0deg) scale(1.80);
    transform: rotate(0deg) scale(1.80);
    opacity: 1;
}
 
/* ----- corps de la page  -----*/
#droite 
{
	position:absolute;
	top:224px;
	height:750px;
	width: 180px;
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;
 
}
#centre
{
	position:absolute;
	top:224px;
	margin-left:185px;
	height:740px;
	width: 580px;
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
 
}
#centre, p
{
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1.1em;
	text-align:justify;
	padding: 5px;
 
}
#gauche {
	position:absolute;
	top:224px;
	margin-left:780px;	
	height:750px;
	width: 180px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;
 
}
#gauche, p
{
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;
}
/* ~~ Styles de pied de page ~~ */
 
#footer 
{
	position:absolute;
	margin-left:3px;	
	top:980px;
	height:120px;
	width: 960px;
}
 
#footer .box_1 div
{
	display: inline-block;
	margin-left:7px;
}
 
#footer .box_2 div
{
	display: inline-block;
	margin-left:50px;
}
#footer .box_3 div
{
	display: inline-block;
	margin-left:50px;
}

le code css du menu

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
@charset "utf-8";
/* CSS Document */
 
 
 
* { margin:0; padding:0; border:0; }
#navMain { 
  position:relative; 
}
#navMain ul, #navMain li, #navMain a {
  position:relative; 
  padding:0; 
  margin:0; 
  border:0; text-decoration:none; 
}
#navMain ul li {
  display:block; 
} 
#navMain ul li a {
  display:block; 
  color:#000;
  padding:10px 10px;
  position: relative;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#navMain > ul > li > a {
  background:#F9FCBE;
}
#navMain > ul > li:hover > a 
{
background:#E6FBF9;	
 }
#navMain ul ul > li > a { 
  padding-left:20px;
}
#navMain ul ul > li { 
 
  box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset; 
	background:#E6FBF9;
 
}
#navMain ul ul ul > li > a { 
  padding-left:40px;
}
#navMain ul ul ul > li { 
    /* background: #555; */
   /* box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;
 
	/*background:#A3F3DB;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px; */
 
}
#navMain ul ul ul ul > li > a { 
  padding-left:60px;
}
#navMain ul ul ul ul > li { 
   /* background: #888;*/
   /* box-shadow: 0 1px 0 #999 inset, 0 -1px 0 #777 inset; */
}
#navMain ul li:hover {
   /* background: #20638f; 
    box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
 
	/* background:#A3F3DB; 
	*/
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;
 
}
#navMain li.hasSub > ul {
  display:none;
}
/* ------------------------------- */
#navMain .hasSub:after {
    position: absolute;
    content: '\25BC';
    display: block;
    font-size: 0.7em;
    color: #fff;
    top: 14px;
    right: 10px;
 
    -o-transition: -o-transform 0.5s;
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -moz-transition: -moz-transform 0.5s;
    -webkit-transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.5s;
    transform: rotate(0deg);
    transition: transform 0.5s;
}
#navMain .hasSub.open:after {
    -o-transition: -o-transform 0.5s;
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -moz-transition: -moz-transform 0.5s;
    -webkit-transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.5s;
    transform: rotate(180deg);
    transition: transform 0.5s;
}
/* ------------------------------- */
@media screen and (min-width:641px) {
   /* menu horizontal : tablet, desktop */
   #navMain > ul > li { float:left; width:20%; }
}

Invité · 01/07/2015, 08h23

Bonjour,

Code css :

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

1
2
3
4
#navMain { 
  position:relative;
  z-index:1;
}

**michel71** · 01/07/2015, 14h24

Merci

Présentation site sous IE 6 et suivants

CSS

Discussions similaires

Partager

Partager