Problème d'include en début de page php

**Jess86** · 03/01/2015, 20h45

Bonjour, j'ai une page php dans laquelle je veux inclure plusieurs autres fichiers constitués uniquement de code css. Je fais 4 lignes include
pour inclure les 4 fichiers, chaque première ligne des 3 derniers fichiers inclus ne fonctionne pas. Comment ca se fait???
Merci par avance de votre aide.

Voici le code d'inclusion:

Code :

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

1
2
3
4
5
 
<?php include "css/couleurcommune.php"; ?>
<?php include "css/csstous.php"; ?>
<?php include "css/cssaccueil.php"; ?> 
<?php include 'aspect-page.php'; ?>

Voici la page couleurcommune: (elle fonctionne bien)

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
 
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Kibéos: Centre spécialisé dans la gym Pilates</title>
<meta charset="UTF-8">
<style type="text/css">
body { width: 100%;
       background-color: #F2E0F7;
       background: -webkit-linear-gradient(#F2E0F7, #FFBF00);
       background: -moz-linear-gradient(#F2E0F7, #FFBF00);
       background: -ms-linear-gradient(#F2E0F7, #FFBF00);
       background: -o-linear-gradient(#F2E0F7, #FFBF00);
       background: linear-gradient(#F2E0F7, #FFBF00);}
#conteneur { border: 2px; 
             border-style: solid; 
             border-color: #848484;
             box-shadow: 1px 1px 3px rgba(0, 0, 0, .3),
                         3px 2px 5px rgba(0, 0, 0, .2),
                         5px 3px 10px rgba(0, 0, 0, .2),
                         10px 7px 15px rgba(0, 0, 0, .15);
           background-color: #FFFFFF;
           padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
           margin-left: auto; margin-right: auto;
           width: 850px;
           height: auto;}
#contenu { background-color: #F2F2F2;
           width: 850px;
           height: auto;}
h3 { font-size: 24px; text-align: center;} 
h4 { font-size: 22px; text-align: center;}
h5 { font-size: 20px; bold;}

Voici la page tous: (1ere ligne, #haut, ne fonctionne pas, si je la coupe alors #marge devient la 1ère ligne et ne fonctionne pas à son tour). C'est
vraiment la premère ligne qui ne fonctionne pas, pour le reste, pas de souci.

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
 
#haut { position: relative; bottom: 80px;}
#marge { margin-left: 80px; margin-right: 80px;}
#centrer { text-align: center;}
#droite { text-align: right;}
h1 { font-size: 44px; font-family: mistral; color: #DA81F5; position: relative; left: 200px;}
h2 { font-size: 16px;}
p { font-size: 18px;}
h2, h3, h4, h5, p { font-family: calibri;}
#logo { position: relative; bottom: 110px;}
nav { position: relative; 
      bottom: 120px; 
      display: block; 
      width: 849px;
      height: 45px;
      border: 1px;
      background: #DA81F5; 
      background: -webkit-linear-gradient(#DA81F5, #FFBF00);
      background: -moz-linear-gradient(#DA81F5, #FFBF00);
      background: -ms-linear-gradient(#DA81F5, #FFBF00);
      background: -o-linear-gradient(#DA81F5, #FFBF00);
      background: linear-gradient(#DA81F5, #FFBF00); 
      border-radius: 10px; 
      box-shadow: 1px 2px 3px rgba(0, 0, 0, .3),
                  3px 4px 5px rgba(0, 0, 0, .2),
                  5px 6px 10px rgba(0, 0, 0, .2),
                  10px 10px 15px rgba(0, 0, 0, .15);}
#li { display: table-cell; vertical-align: middle;}
#li a { display: block;
          width: 85px;
          text-align: center; 
          color: rgba(0, 0, 0, .7); 
          text-decoration: none;
          padding: 4px 4px 0px 4px;
          text-shadow: 0 2px 0 rgba(255, 255, 255, .4);}
#bouton { position: relative;
          bottom: 90px;
          left: 703px;
          z-index: 2;}
#news { position: relative;
	bottom: 88px;
	right: 139px;} 
#menu { width: auto;            
        height: auto;   
        margin: 0;          
        padding: 0;            
        border: 0;
        list-style-type: none;}                                        /*-------je ne veux pas de puce--------*/
#menu li { float: left;                                                /*------ca me permet de mettre les items horizontalement------*/
           width: 142px;          
           margin: 0;                                                /*------pas d'espace entre les cellules-------*/
           padding: 0;
           border: 1px solid transparent;}
#menu li a { display: block;        
             color: #FFFFFF;                                           /*------je donne une couleur à la police------*/
             background-color: rgb(0, 0, 0);                           /*------je donne un fond solide par sécurité pour les navigateurs qui ne reconnaissent pas la transparence-----*/
             background-color: rgba(0, 0, 0, 0.5);                     /*------je donne un fond transparent pour les navigateurs qui le reconnaissent-----*/
             margin: 0;                                
             padding: 4px 4px;                        
             border: 1px solid #FFFFFF;
             text-align: center;                 
             text-decoration: none;}                                   /*-----pas de décoration pour mes liens-----*/
#menu li a:hover { background-color: rgb(21, 21, 21);                  /*-------je donne une couleur de fond au survol sur mes liens-------*/
                   background-color: rgba(21, 21, 21, 0.8);}      
#menu .menuderoulant { display: none;                                  /*------pour le faire disparaitre------*/
                       margin: 0;                                      /*------pas de marge interne et externe ni bordure pour mettre tout le monde d'accord-----*/
                       padding: 0;
                       border: 0;
                       position: absolute;                              /*------pour ne pas pousser un éventuel texte dessous-----*/
                       list-style-type: none;}                         /*-------pas de puce-------*/
#menu .menuderoulant li { float: none;
                          width: 142px;                                /*-----je donne une largeur à mes cellules de sous menu----------*/
                          margin: 0;
                          padding: 0;
                          border: 1px solid transparent;}           /*-----des bordures transparentes pour espacer mes cellules-----*/
#menu .menuderoulant li a { display: block;
                            color: #FFFFFF;
                            background-color: rgb(0, 0, 0);
                            background-color: rgba(0,0,0,0.5);
                            margin: 0;
                            padding: 4px 4px;
                            border: 1px solid #FFFFFF;
                            text-align: center;
                            text-decoration: none;}
#menu .menuderoulant li a:hover { background-color: rgb(21, 21, 21);
                                  background-color: rgba(21, 21, 21, 0.8);}
#menu li:hover > .menuderoulant { display: block;}                    /*------pour faire apparaitre notre sous menu au survol du menu de premier niveau------*/
#calinessetitre { font-size: 24px; font-weight: bold; position: relative; left: 300px; top: 80px;} 
#calinessesoustitre { font-size: 16px; font-style: italic; text-align: center;}
#activitetitre { font-size: 24px; font-weight: bold; position: relative; left: 350px; top: 80px;} 
#activitetitres { font-size: 24px; font-weight: bold; position: relative; left: 400px; top: 80px;}
#activitecontour { border: 1px; 
           border-style: solid; 
           border-color: black;
           background-color: #F2F2F2;
	   padding: 5px;
	   margin: 0;
           width: 670px;
           height: auto;}
#activiteinterieur { background-color: #F2F2F2;
             width: auto;
             height: auto;}
#activitecadre { border: 1px;
         border-style: solid;
         border-color: black;
         width: 275px;
         height: 136px;}
#locauxcontour { border: 1px; 
           border-style: solid; 
           border-color: black;
           background-color: #F2F2F2;
	   padding: 5px;
	   margin: 0px;
           width: 840px;
           height: 203px;}
#locauxinterieur { background-color: #F2F2F2;
             width: auto;
             height: 203px;}
#locauxcadre { border: 1px;
         border-style: solid;
         border-color: black;
         width: auto;
         height: 203px;}
#textes { position: relative;
		bottom: 190px;
                left: 350px;
	        width: 430px;}
footer { text-align: right;}

Je ne vous donne pas les prochaines pages de code car c'est pareil, la première ligne ne fonctionne pas, après pas de souci.
Merci beaucoup pour votre aide!!!!!!

**CosmoKnacki** · 03/01/2015, 22h03

C'est normal, l'instruction include inclus le contenu d'un fichier texte dans le script PHP et l'exécute. Or pour l'interpréteur PHP, du code CSS ne veut rien dire.

Quand tu utilises include le fichier doit contenir du code exécutable, exemple:

Code :

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

1
2
3
4
5
6
7
<?php
echo <<<'EOD'
#haut { position: relative; bottom: 80px;}
#marge { margin-left: 80px; margin-right: 80px;}
...
EOD;
?>

Mais je ne vois pas trop pourquoi tu cherches à agglutiner tous tes fichiers CSS pour les renvoyer en un bloc avec le reste de la page. Un des intérêts des feuilles de style, c'est justement d'être réutilisable d'une page sur l'autre en épargnant au client de charger l'intégralité des styles pour chaque page. La bonne manière de procéder est de lier tes feuilles de style à ton document html:

Code :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>gnagnagna</title>
        <link rel="stylesheet" type="text/css" href="css/style_global_du_site.css"/>
        <link rel="stylesheet" type="text/css" href="css/style_particulier_a_ce_type_de_pages.css"/>
        <link rel="stylesheet" type="text/css" href="css/style_particulier_a_cette_page.css"/>
    </head>

Il faut comprendre qu'un fois la première page du site chargée dans le navigateur, toutes les autres pages n'auront plus à télécharger les feuilles de style qui sont liées à cette première page comme par exemple style_global_du_site.css. D'où une économie de bande passante pour le serveur, et un gain de vitesse de chargement pour le client.

Donc enlève les extensions .php de tes feuilles de style et lient les dans le html.

**Jess86** · 03/01/2015, 22h57

merci pour ta réponse rapide, mais je débute et je ne suis pas certaine d'avoir bien compris.
Il faut dans un premier temps que je change les extensions .php en .css.
Dans un second temps, au lieu d'utiliser "include" il faut que je les inclus sous forme de liens dans ma balise <head>.
C'est bien ça?

Tu me dis qu'en ouvrant ma page ça charge le contenu pour l'ensemble du site et du coup que ça me fait gagner de la bande passante.
Ca je comprends bien, mais j'ai quand même besoin de faire apparaître ces liens dans toutes les pages qui en ont besoin par la suite, ou étant déjà chargés je n'ai besoin de les
faire apparaître que sur une seule page?
Merci :-)

**Jess86** · 03/01/2015, 23h01

En plus clair, ce lien est utilisé par toutes mes pages : <link rel="stylesheet" type="text/css" href="css/style_global_du_site.css"/>
je dois donc le faire apparaître sur une seule page ou sur toutes les pages du site???
Merci

**CosmoKnacki** · 04/01/2015, 00h13

Sur toutes les pages du site (qui en ont besoin bien sûr), pour que le navigateur puisse associer ces styles à la page demandée. Seulement si cette feuille a déjà été téléchargée pour une page, elle ne le sera pas pour les autres (vu qu'elle se trouve déjà dans le cache du navigateur).

**Jess86** · 04/01/2015, 12h10

Merci beaucoup, ca marche parfaitement bien!! :-)

Problème d'include en début de page php

Langage PHP

Discussions similaires

Partager

Partager