IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Décalage d'un include


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juillet 2010
    Messages : 11
    Par défaut Décalage d'un include
    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.

  2. #2
    Membre chevronné
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    207
    Détails du profil
    Informations personnelles :
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Novembre 2010
    Messages : 207
    Par défaut
    Tu as des
    dans le code source de index.php si tu les enlèves ça fonctionne bien.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juillet 2010
    Messages : 11
    Par défaut 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.

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    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).

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Juillet 2010
    Messages : 11
    Par défaut 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.

  6. #6
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    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/

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. include
    Par ronald dans le forum ASP
    Réponses: 11
    Dernier message: 06/11/2003, 14h30
  2. INCLUDE non exécuté
    Par Sadneth dans le forum ASP
    Réponses: 3
    Dernier message: 07/09/2003, 00h44
  3. Réponses: 14
    Dernier message: 01/09/2003, 22h46
  4. Décalage graphique et souris
    Par Sub0 dans le forum Composants VCL
    Réponses: 7
    Dernier message: 27/06/2003, 09h44
  5. #include "math.h" et #include <math.h>
    Par pounka dans le forum C
    Réponses: 4
    Dernier message: 01/05/2003, 21h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo