Impossible de lié mon css a mon html [Résolu/Fermé]

Signaler
-
 Serken -
Bonjour,

Je débute dans la création de site web et je me retrouve bloquer car mon fichier css n'arrive pas a se lié au html.
J'ai tenter de le faire marcher sur JSbin pas de soucis, mais sur komodo ou même en le lançant avec chrome pas de css qui s'applique.
Mes docs html et css sont tous dans le même dossier, j'ai déjà essayer de le mettre dans une autre dossier et de changer le chemin mais rien à faire.

Si vous avez des idées ;)
ps: ne prêtez pas attention au couleur utilisés dans mon css elle me permette pour instant de différencier des parties ;)

Ci-joint mon code:

HTML:

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
     <title>La Garde De Nuit Eratz 1.29</title>
        <meta charset= "utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
      <!--banniere de la guilde img en tete-->
    <header>
      <img src="https://image.noelshack.com/fichiers/2019/24/4/1560432410-banniere-finale.jpg">
    </header>
        
  <div class="image2">
  <img src="https://i.gyazo.com/700197a261bc8cf5e49b3dda1a4f59d9.jpg">
  </div>
    
         <!--menu principal-->
         
    <nav>   
        
         <div class="table">
             
                <ul>
                     <li class="menu">
                     <a href="accueil1">Accueil</a>
                     </li>
            
                     <li class="menu">
                     <a href="la guilde">La Guilde</a>
                     </li>
            
                     <li class="menu">
                     <a href="le recrutement">Le Recrutement</a>
                     </li>
            
                     <li class="menu">
                     <a href="https://www.dofus.com/fr/forum/1580-1-29-eratz-henual">Forum 1.29</a>
                     </li>
            
                     <li class="menu">
                     <a href="http://www.dofus.tools/">Dofus Tools</a>
                     </li>
            
                     <li class="menu">
                     <a href="http://lagardenuitdof.forum-jeu.com/">Notre Forum</a>
                     </li>
                </ul>
         </div>
        
    </nav>
    
              <br>
              <br>
              <br>
              <br><br>
              <br><br>
              <br><br>
              <br><br>
              
              <br><br>
              <br><br>
              <br><br>
              <br>

  <div class="table2">
             
                <ul>
                     <li class="menu2">
                     <a href="https://barbok.eratz.fr/index.php/accpano">Panoplies</a>
                     </li>
            
                     <li class="menu2">
                     <a href="https://barbok.eratz.fr/index.php/equipements/amulettes">Les Stuffs</a>
                     </li>
            
                     <li class="menu2">
                     <a href="le recrutement">Le Recrutement</a>
                     </li>
            
                     <li class="menu2">
                     <a href="https://www.dofus.com/fr/forum/1580-1-29-eratz-henual">Forum 1.29</a>
                     </li>
            
                     <li class="menu2">
                     <a href="http://www.dofus.tools/">Dofus Tools</a>
                     </li>
            
                     <li class="menu2">
                     <a href="http://lagardenuitdof.forum-jeu.com/">Notre Forum</a>
                     </li>
                </ul>
         </div>
    
    <footer>
      
        <p>Dofus est un MMORPG édité par Ankama."Barbok " est un site non-officiel sans aucun lien avec Ankama."LaGardeDeNuit "
           est un site non-officiel sans aucun lien avec Ankama.
           Toutes les illustrations sont la propriété d'Ankama Studio et de Dofus.</p>
    
    </footer>
 
</body>
</html>    


CSS:

body{

        font-family:'Century Gothic', Calibri, Serif;
        font-size:14px;
        margin:0px;
        padding:0px;
        background-color:#1e457c;
}

header{
    width:100%;
}

footer{
       height:1px;
       padding-top:0px;
       text-align:center;      
       border-top:2px solid #AAA;

}

nav{
       width:100%;
       background-color:#098BBF;
       
       
}
nav ul{
        margin:0px;
        padding:0px;
       
}

nav li{
       list-style-type:none;
       float:left;
       
}

nav a{
       display:inline-block;
       text-decoration:none;
       padding:20px 30px;
       color:red;
       text-transform:uppercase;
       font-size:15px;
       
       
}

table{
       display:table;
       margin: 0 auto;
       
       
}
           /* onglet menu*/

.menu-ind:hover{
  
  background-color:yellow;
  border-top:5px solid red;
}

.menu-exp:hover{
  border-top: 5px solid green;
  background-color: blue;
  
  
}

.menu-hob:hover{
  
  border-top:5px solid black;
  background-color:pink;
}


.menu-con:hover{
      border-top:5px solid black;
      background-color: pink;
  
}

4 réponses

Messages postés
137
Date d'inscription
mercredi 15 mai 2019
Statut
Membre
Dernière intervention
11 mars 2020
62
bonjour,
et si tu mettait le css dans la feuille HTML ?
avec la balise </style>
comme sur la capture d'ecran:


a+
Bonjour,

J'ai lu sur pas mal de site qu'il était conseillé de séparer le css du html pour éviter les erreurs c’est pour cela que je souhaite qu'il soit dans deux fichiers distinct.

Le plus bizarre c'est que sur js bin pas de soucis tout marche. Pourtant le link est bien noté (j'ai vérifier 3 fois de pas avoir fait de fautes).
Messages postés
29309
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
5 août 2020
6 581
Salut,

Il manque la balise <body>

Bonjour, il y a bien une balise body, juste une erreur dans le copier coller du post
Messages postés
160
Date d'inscription
dimanche 27 mars 2016
Statut
Membre
Dernière intervention
22 mars 2020
25
Bonjour,

Essaie également en fermant la balise meta avec > , comme ceci :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Allélouyaaaaaaa sa marchais pas a cause de la meta pas fermer x), merci à tous les amis