Bonjour tout le monde !
Je suis un jeune retraité qui se dévoue bénévolement à refaire une nouvelle image pour sa municipalité.
La page d'accueil que je "découpe" en diverses sections telles, header.php, slideshow.php, menu.php etc, afin de ne pas avoir à retaper tout le code pour les quelque 70 pages que devrait contenir le site, me cause des ennuis.
La page test d'origine contenant tout le code affiche bien sous IE et FF mais pas l'autre. Comme une image vaut mille mots voici les liens :
Page test ok : http://www.ville.saint-sylvestre.qc....upage/test.php
Page qui décale : http://www.ville.saint-sylvestre.qc....page/index.php
Le décalage se voit dans la colonne de droite "Infos importantes" qui devrait être au même niveau que celle de gauche.
J'ai bien sûr consulté le forum afin de voir si quelqu'un avait eu le même problème mais après plus de 20 pages, j'ai décidé d'ouvrir une nouvelle discussion.
Vous trouverez ci-dessous le code Css et le code Php/html est facilement vérifiable par un clic droit de la souris sur la page problématique.
Css :Il y a un autre fichier Css qui sert au menu uniquement.
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 body { width: 100%; margin: 0; font-family: Arial, Tahoma, Helvetica, sans-serif; color: #737068; background-image: url(images/bg.gif); background-repeat: repeat-x; text-align: justify; /*overflow:auto*/ } #blocs { position: absolute; width: 100%; height: 1200px; } #bloc_entete { position: absolute; width: 100%; height: 139px; } #entete { position: absolute; width: 970px; height: 139px; left: 50%; margin-left: -485px; background-image: url(images/bg_menuaccueil.gif); } #taille_text { position: absolute; width: 160px; height: 25px; top: 38px; left: 5px; } #date_jour { position: absolute; width: 240px; height: 30px; top: 40px; left: 750px; } .datej { color: #FFFFFF; font-size: 12px; font-weight: bold; text-decoration: none; } #logo { position: absolute; width: 163px; height: 165px; top: 8px; left: 400px; z-index: 10; } a.ent_accueil, a.ent_plan, a.ent_suggestions, a.ent_joindre { position: relative; color: #FFFFFF; font-size: 12px; font-weight: normal; top: 70px; text-decoration: none; } a.ent_accueil:hover, a.ent_plan:hover, a.ent_suggestions:hover, a.ent_joindre:hover { font-size:12px; color:#A1A29A; text-decoration:none; } a.ent_accueil { left: 15px; } a.ent_plan { left: 210px; } a.ent_suggestions { left: 535px; } a.ent_joindre { left: 700px; } span.txt_gris_12 { position: absolute; color: #000000; font-size: 12px; font-weight: normal; left: 655px; top: 107px; } #recherche { position: absolute; width: 50px; height: 30px; top: 104px; left: 730px; z-index: 30; } #bloc_slideshow { position: absolute; width: 970px; height: 283px; left: 50%; top: 139px; margin-left: -485px; } #bloc_menu { position: absolute; width: 970px; height: 38px; left: 50%; top: 422px;margin-left: -480px; } #bloc_corps { position: absolute; width: 970px; height: 390px; left: 50%; top: 460px; margin-left: -485px; } #col_gauche, #col_news, #col_infos { height: 390px; left: 50%; } #col_gauche { position: relative; width: 193px; left: -1px; top: 0px; background-image: url(images/bas_calendrier.png); } #ent_meteo { position: absolute; width: 193px; height: 76px; top: 0px; left: 0px; } #meteo_locale { position: absolute; width: 42px; height: 40px; top: 34px; left: 20px; background-image: url(images/icon_meteo.png); } a.currentTemp { position: relative; top: -40px; left: 100px; color: #FFFFFF; font-size: 12px; font-weight: normal; text-decoration: none; } a.cityName { position: relative; top:-25px; left: 80px; color: #FFFFFF; font-size: 12px; font-weight: normal; text-decoration: none; } #ent_calendrier { position: absolute; width: 193px; height: 50px; top: 76px; left: 0px; background-image: url(images/ent_calendrier.png); } #calendrier { position: absolute; width: 193px; height: 150px; top: 130px; left: 5px; } #txt_sylgym { position: absolute; width: 185px; height: 50px; top: 273px; left: 4px; } a.txt_bold { color: #FFFFFF; font-size: 12px; line-height: 18px; font-weight: bold; padding-left: 10px; } a.txt_blanc { color: #FFFFFF; font-size: 12px; line-height:18px; text-align: justify; padding-left: 10px; padding-right: 10px; } #col_news { position: absolute; width: 590px; top: 0px; margin-left: -295px; } #ent_news { position: absolute; width: 582px; height: 50px; top: 0px; left:4px; background-image: url(images/ent_accueil_news584.png); } #txt_news1, #txt_news2 { position: absolute; width: 575px; height: 100px; left:4px; } #txt_news1 { top: 55px; } #txt_news2 { top: 150px; } #news_separateur { position: absolute; width: 575px; height: 5px; top: 80px; } a.news_titre{ color: black; font-size: 16px; line-height:10px; font-weight: bold; padding-left: 10px; } p.news_txt { color: black; font-size: 12px; font-weight: normal; line-height:12px; padding-left: 10px; padding-right: 10px; text-align: justify; } p.news_lien { color: #507330; font-size: 12px; font-weight: bold; padding-right: 10px; text-decoration:underline; padding-right: 10px; text-align: right; } .news_lien:hover { color: #878787; font-size: 12px; font-weight: bold; text-decoration:underline; } #col_infos { position: relative; width: 193px; top: -390px; margin-left: 295px; background-image: url(images/bg_col_droite.png); } #ent_infos { position: absolute; width: 193px; height: 70px; top: -1px; right: 0px; background-image: url(images/ent_infos.png); } #txt_info1, #txt_info2, #txt_info3 { position: absolute; width: 193px; height: 80px; left:4px; z-index: 10; } #txt_info1 { top: 50px; } #txt_info2 { top: 100px; } #txt_info3 { top: 150px; } #infos_separateur1, #infos_separateur2, #infos_separateur3 { position: absolute; width: 185px; height:5px; left: 0px; } #infos_separateur1 { top: 35px; } #infos_separateur2 { top: 43px; background-image: url(images/infos_separateur.gif); } #infos_separateur3 { top: 102px; background-image: url(images/infos_separateur.gif); } #bloc_gradient { position: absolute; width: 100%; height: 33px; top:850px; background-image: url(images/bg_gradient_bottom.gif); } #no_gradient { position: absolute; width: 970px; height: 33px; top: 0px; left: 50%; margin-left: -485px; background-image: url(images/bg_nogradient.gif); } #bloc_pied_page { position: absolute; width: 100%; height: 500px; top:883px; background-color: #34261d; } #txt_pied_page { position: relative; width: 970px; height: 115px; left: 50%; margin-left: -485px; } .copyright { color: #FFFFFF; font-size: 11px; text-align: center; text-decoration: none; } .copyright:hover { text-decoration: none; }
Merci d'avance pour l'aide que je recevrai.
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 .preload1 {background: url(../images/bg_menu_1.png);} .preload2 {background: url(../images/bg_menu_1a.png);} #nav {padding:0; margin:0; list-style:none; height:38px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; left: -5px;} #nav li.top {display:block; float:left; height:38px;} #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#000000; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 45px; cursor:pointer;background: url(../images/bg_menu_0.png);} #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:38px; background: url(../images/bg_menu_0.png) right top no-repeat;} #nav li:hover a.top_link {color:#507330; background: url(../images/bg_menu_1.png) no-repeat;} #nav li:hover a.top_link span.down {background:url(../images/bg_menu_1a.png) no-repeat right top;} /* styles */ #nav li:hover {position:relative; z-index:200;} /* sm par classe d'onglets du menu principal */ #nav li:hover ul#accueil.sub, #nav li:hover ul#services.sub, #nav li:hover ul#loisirs.sub, #nav li:hover ul#affaires.sub, #nav li:hover ul#vie.sub, #nav li:hover ul#tourisme.sub { top:38px; background: #ababab/* background des sm */; padding:3px; border:1px solid #4a4a4a/* bordure des sm */; white-space:nowrap; height:auto; z-index:300; } /* positionnement et largeur des sm */ #nav li:hover ul#accueil.sub { left:10px; width:140px; } #nav li:hover ul#services.sub {left:22px; width:200px; } #nav li:hover ul#loisirs.sub { left:57px; width:100px; } #nav li:hover ul#affaires.sub { left:25px; width:110px;} #nav li:hover ul#vie.sub { left:52px; width:80px; } #nav li:hover ul#tourisme.sub { left:36px; width:100px; } #nav li:hover ul#accueil.sub li a, #nav li:hover ul#services.sub li a, #nav li:hover ul#loisirs.sub li a, #nav li:hover ul#affaires.sub li a, #nav li:hover ul#vie.sub li a, #nav li:hover ul#tourisme.sub li a { display:block; font-size:11px; height:18px; line-height:18px; text-indent:5px; color:#000000; text-decoration:none;border:1px solid #ababab /* bordure de tous les items sm et ss-m */; } /* voilà le problème . . .solution : séparer l'over des sm et ss-m */ /* largeur hover des sm */ #nav li:hover ul#accueil.sub li a { width:138px; } #nav li:hover ul#services.sub li a { width:198px; } #nav li:hover ul#loisirs.sub li a { width:98px; } #nav li:hover ul#affaires.sub li a { width:108px; } #nav li:hover ul#vie.sub li a { width: 78px; } #nav li:hover ul#tourisme.sub li a { width: 98px; } /* largeur hover des ss-m */ #nav li:hover ul#services.sub li ul.avis li a { width:198px; } #nav li:hover ul#services.sub li ul.reglements li a { width:198px; } #nav li:hover ul#services.sub li ul.taxes li a { width:198px; } #nav li:hover ul#services.sub li ul.urbanisme li a { width:198px; } #nav li:hover ul#services.sub li ul.environnement li a { width:198px; } #nav li:hover ul#services.sub li ul.developpement li a { width:198px; } #nav li:hover ul#services.sub li ul.organismes li a { width:198px; } #nav li:hover ul#services.sub li ul.education li a { width:198px; } #nav li ul#tourisme li a:hover.fly { width: 98px; } #nav li ul.sub li a.fly {background:#ababab/* normale des sm qui ont des ss-m */ url(images/arrow.gif) 120px 6px no-repeat;} #nav li:hover ul.sub li:hover {background:#505050/* hover des sm sans flèches et hover des ss-m */; color:#fff; border-color:#fff;} #nav li:hover ul.sub li a.fly:hover {background:#505050/* hover des sm avec flèches */ url(images/arrow_over.gif) 200px 6px no-repeat; color:#fff;} /* positionnement des ss-m */ #nav li:hover ul#services li:hover ul, #nav li:hover ul#tourisme li:hover ul /*#nav li:hover li:hover li:hover ul*/ { top:-4px; background: #ababab/* background des ss-m */; padding:3px; border:1px solid #4a4a4a/* bordure des sm */; white-space:nowrap; z-index:400; height:auto; } /* largeur de ss-m services et ss-m tourisme */ #nav li:hover ul#services li:hover ul { left:200px; width:200px; } #nav li:hover ul#tourisme li:hover ul { left:-108px; width:100px; } /*.sucre:hover, .haltes:hover { width:98px; display:block; font-size:11px; height:18px; line-height:18px; text-indent:5px; color:#000000; text-decoration:none;border:1px solid #ababab; }*/ #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {background:#505050/* montre l'hover du sm qui appartient au ss-m sur lequel on pointe */ url(images/arrow_over.gif) 120px 6px no-repeat; color:#fff ; border-color:#fff; } #nav li:hover li:hover li a.fly {background:#ababab/* affecte rien . . . */ url(images/arrow.gif) 120px 6px no-repeat; color:#000; border-color:#ababab; }
Partager