Décalage d'un include [Résolu]

Drahcir · 18/11/2010, 21h35

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 :

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; }

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
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; }

Merci d'avance pour l'aide que je recevrai.

scourjean · 19/11/2010, 10h51

Tu as des

Code :

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

1
2
3
//
 
?

dans le code source de index.php si tu les enlèves ça fonctionne bien.

Drahcir · 19/11/2010, 14h53

Bonjour.

En effet, j'avais mis des // entre l'include du slideshow croyant que c'était lui qui causait problème mais même en les enlevant, çà ne change rien.

Enfin je n'ai pas trouvé les ? dont vous parlez sauf ceux qui font parti des balises du Php et je pense qu'ils sont obligatoires.

Est-il possible de m'aider à mieux cibler la cause en ajoutant par exemple la ligne de code qui cause le problème.

Je débute en Php et l'apprentissage de ce langage est une route semée d'embûches.

Merci à l'avance pour votre aide.

Bisûnûrs · 19/11/2010, 16h22

Salut ! La page index.php a l'air d'être enregistrée en UTF-8 avec la marque d'octets (BOM). Il faut que tu enregistres les fichiers en UTF-8 sans BOM (tous les fichiers inclus aussi, si tu utilises des inclusions PHP).

Drahcir · 20/11/2010, 00h27

Bonsoir.

Je suis totalement perdu.

D'abord, quelle est la différence de syntaxe entre les deux ?

Dans ma balise meta, j'ai utilisé charset=utf-8 et on me dit que c'est avec BOM.

Enfin, dois-je écrire charset=utf-8 sans BOM ? Je doute que ce soit çà.

C'est du chinois pour moi cette notion de BOM et de sans BOM.

Bonne fin de soirée.

Bisûnûrs · 20/11/2010, 12h30

Je te renvoie sur mon tutoriel qui traite de l'UTF-8 pour plus d'informations :
http://j-willette.developpez.com/tut...-site-en-utf8/

Drahcir · 20/11/2010, 19h18

Bonjour tout le monde.

Un merci tout spécial à Bisûnûrs.

En effet, je n'avais pas remarqué que Notepad++ permettait cette configuration.

J'ai tout sauvegardé mes fichiers incluant ceux avec extension .css avec l'encodage utf-8 (sans Bom).

J'ignore si c'est à la suite de cette opération, mais maintenant je n'ai plus de décalage.

Je vais marquer ce post comme résolu.

Encore merci !

19/11/2010, 14h53	#3
Drahcir Invité de passage Inscription : juillet 2010 Messages : 11 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 11 Points : 4 Points : 4	Décalage d'un include Bonjour. En effet, j'avais mis des // entre l'include du slideshow croyant que c'était lui qui causait problème mais même en les enlevant, çà ne change rien. Enfin je n'ai pas trouvé les ? dont vous parlez sauf ceux qui font parti des balises du Php et je pense qu'ils sont obligatoires. Est-il possible de m'aider à mieux cibler la cause en ajoutant par exemple la ligne de code qui cause le problème. Je débute en Php et l'apprentissage de ce langage est une route semée d'embûches. Merci à l'avance pour votre aide.
	00

19/11/2010, 16h22	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Salut ! La page index.php a l'air d'être enregistrée en UTF-8 avec la marque d'octets (BOM). Il faut que tu enregistres les fichiers en UTF-8 sans BOM (tous les fichiers inclus aussi, si tu utilises des inclusions PHP).
	00

20/11/2010, 00h27	#5
Drahcir Invité de passage Inscription : juillet 2010 Messages : 11 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 11 Points : 4 Points : 4	Utf-8 avec ou sans BOM Bonsoir. Je suis totalement perdu. D'abord, quelle est la différence de syntaxe entre les deux ? Dans ma balise meta, j'ai utilisé charset=utf-8 et on me dit que c'est avec BOM. Enfin, dois-je écrire charset=utf-8 sans BOM ? Je doute que ce soit çà. C'est du chinois pour moi cette notion de BOM et de sans BOM. Bonne fin de soirée.
	00

20/11/2010, 12h30	#6
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Je te renvoie sur mon tutoriel qui traite de l'UTF-8 pour plus d'informations : http://j-willette.developpez.com/tut...-site-en-utf8/
	00

20/11/2010, 19h18	#7
Drahcir Invité de passage Inscription : juillet 2010 Messages : 11 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 11 Points : 4 Points : 4	Utf-8 Bonjour tout le monde. Un merci tout spécial à Bisûnûrs. En effet, je n'avais pas remarqué que Notepad++ permettait cette configuration. J'ai tout sauvegardé mes fichiers incluant ceux avec extension .css avec l'encodage utf-8 (sans Bom). J'ignore si c'est à la suite de cette opération, mais maintenant je n'ai plus de décalage. Je vais marquer ce post comme résolu. Encore merci !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email