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

**hellspawn_ludo** · 10/04/2008, 22h54

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 :

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
 
<!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.

**12monkeys** · 10/04/2008, 23h00

Bonsoir

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

Code :

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

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

devenant :

Code :

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

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

**hellspawn_ludo** · 11/04/2008, 01h56

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 ?

**12monkeys** · 11/04/2008, 09h48

Bonjour

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

Code :

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

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

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

**hellspawn_ludo** · 11/04/2008, 10h41

Comme demandé :

Index.php

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
 
<!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 :

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
 
<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 :

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

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 :

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
 
<!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>