[HTML] Lier mon fichier CSS dans ma page grâce à LINK

Version imprimable

Bonjour,

Pour mon site web, je souhaite que mon menu reste fixe. Pour cela, j'utilise du PHP (auquel je suis newbie) suite à quelques recommandations. Là dessus, aucun problème.

Toutefois, j'aimerais lier mon fichier CSS à ma page mais impossible d'y arriver.
Il n'est pas reconnu et en conséquence ma barre de navigation s'affiche au style "brute".

Voici mon index.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Mon site web</title> <link rel="Stylesheet" type="text/css" href="/CSS_menu.css"> </head> <body> <div id="entete"> <?php include('BarreNavigation.htm'); ?> </div> </body> </html>
Auriez-vous une explication ?

En revanche, je tiens à préciser que lorsque je mets un include('CSS_menu.css'), cela fonctionne mais cela inclue le fichier complet dans la page et ce n'est pas ce que je souhaite.

Merci à vous.

10/04/2008, 22h00
12monkeys

Bonsoir

Dans ton link il n'y aurais pas un slash en trop ?

Code:

<link rel="Stylesheet" type="text/css" href="/CSS_menu.css">

devenant :

Code:

<link rel="Stylesheet" type="text/css" href="CSS_menu.css">
11/04/2008, 00h56
hellspawn_ludo

Et bien, j'ai essayé avec et sans le slash mais rien à faire.

Le truc qui se produit, c'est que mon menu est invisible. Mais les liens sont bien présent puisque mon curseur de souris se change en une petite main lors du survol sur ceux-ci.

Du coup, j'ai collé mon CSS directement dans ma page index.php pour voir s'il n'y avait pas d'erreur. Mais non, tout s'affiche.

Et même en cherchant sur le forum concernant la syntaxe de link, je l'ai bien orthographié. Je ne comprends donc pas le souci.

Aurais-tu une autre idée à me suggérer ?
11/04/2008, 08h48
12monkeys

Bonjour

A tout hasard essaye voir de mettre stylesheet avec un S en minuscule (on ne sais jamais...)

Code:

<link href="style.css" rel="stylesheet" type="text/css">

Sinon met voir le code html et css entier (php interprété) pour voir...

Comme demandé :

Index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 
    <title>Mon site web</title>
 
	<link href="style.css" rel="stylesheet" type="text/css">
 
</head>
 
<body>
 
    <div id="cadreMenu">
        <?php
            include('BarreNavigation.htm');  
        ?>
    </div>
 
</body>
</html>

Style.css

Code:

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
 
<style type="text/css">
 
        #cadreMenu      {   position            :   relative;
                            margin              :   auto; 
                            padding             :   0px;
                            width               :   800px;
                            height              :   110px;
                            background-color    :   black;
                            background-image    :   url(Images/Bandeau.jpg);
                            background-repeat   :   no-repeat; 
                        } 
    
       
        ul#menu         {   float               :   left;               
                            margin-left         :   0px;                /* Marge extérieur nulle */
                            padding             :   0px;                /* Marge intérieur à 1px sauf pour le bas */ 
                            width               :   72px;              /* Largeur de notre liste */
                            font-family         :   Century Gothic;
                            font-size           :   8pt;                /* Taille de notre police */
                            background-color    :   none;
                        }
 
        ul#menu li      {   list-style-type     :   none;               /* Aucunes puces associées */
                        }
 
        ul#menu li a    {   width               :   auto;               /* Largeur interprétée par tous les navigateurs excepté IE6 et inférieur */                                         
                            width               :       100%;               /* largeur interprétée par IE6 et inférieur */
                            padding             :   0px;                /* Définition des marges intérieures du lien entre le texte et sa bordure */  
                            text-decoration     :   none;               /* Suppression du soulignement */
                            color               :   white;              /* Couleur de la police */
                            display             :   block;              /* Définition sous forme de block */
                            background-color    :   none;               /* Définition de la couleur de fond du lien */ 
                            text-indent         :   10px;
                        }               
 
 
        /* Survol de la souris */
        ul#menu li a:hover  {   text-indent     :   11px;}              /* Survol de la souris */
        ul#menu li a:focus  {   text-indent     :   11px;}              /* Prise de focus avec la touche TAB. Ne fonctionne pas avec IE7 */
        ul#menu li a:hover  {   font-size       :   9pt;}               /* Taille de notre police */
 
        
</style>

BarreNavigation.htm

Code:

1
2
3
4
5
6
7
8
9
10
 
     <ul id="menu">
        <li><a id="Accueil" href="index.php?page=Accueil">Accueil</a></li>
        <li><a id="Bio" href="index.php?page=Bio">Bio</a></li>
        <li><a id="Musique" href="index.php?page=Musique">Musique</a></li>
        <li><a id="Photos" href="index.php?page=Photos">Photos</a></li>
        <li><a id="Videos" href="index.php?page=Videos">Videos</a></li>
        <li><a id="Presse" href="index.php?page=Presse">Presse</a></li>
        <li><a id="Contact" href="index.php?page=Contact">Contact</a></li>
    </ul>

Et enfin, le fichier interprété par php :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 
    <title>Mon site web</title>
 
	<link href="style.css" rel="stylesheet" type="text/css">
 
</head>
 
<body>
 
    <div id="cadreMenu">
      <ul id="menu">
        <li><a id="Accueil" href="index.php?page=Accueil">Accueil</a></li>
        <li><a id="Bio" href="index.php?page=Bio">Bio</a></li>
        <li><a id="Musique" href="index.php?page=Musique">Musique</a></li>
        <li><a id="Photos" href="index.php?page=Photos">Photos</a></li>
        <li><a id="Videos" href="index.php?page=Videos">Videos</a></li>
        <li><a id="Presse" href="index.php?page=Presse">Presse</a></li>
        <li><a id="Contact" href="index.php?page=Contact">Contact</a></li>
      </ul>
 
    </div>
 
</body>
</html>

Toujours la même chose, ma page est blanche et les liens sont invisibles mais cliquables.

Encore merci pour ton aide.

11/04/2008, 13h19
12monkeys

Bonjour

L'exemple Style.css que tu donnes c'est bien ton fichier css extérieur ? Alors ne mets pas

Code:

<style type="text/css"></style>

Ceci n'est à mettre que dans une page html (ou php...) entre les balises <head></head>

Laisse juste le code css sans les balises <style>...
11/04/2008, 13h58
hellspawn_ludo

12monkeys,

Ca fonctionne royal.

Il est vrai que j'avais copié le code CSS de ma page HTML directement dans mon fichier .css. Quel idiot ! Mais bon, c'est comme ça qu'on apprend.

Un grand merci à toi pour ton implication.

;)
11/04/2008, 17h07
12monkeys

De rien :ccool: