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

-
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;
  
}
Afficher la suite 

4 réponses

Messages postés
132
Date d'inscription
mercredi 15 mai 2019
Statut
Membre
Dernière intervention
19 octobre 2019
34
0
Merci
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).
Commenter la réponse de LombreBlanche34
Messages postés
26984
Date d'inscription
mercredi 2 mai 2007
Statut
Modérateur
Dernière intervention
19 octobre 2019
5564
0
Merci
Salut,

Il manque la balise <body>

Bonjour, il y a bien une balise body, juste une erreur dans le copier coller du post
Commenter la réponse de jee pee
Messages postés
152
Date d'inscription
dimanche 27 mars 2016
Statut
Membre
Dernière intervention
16 octobre 2019
22
0
Merci
Bonjour,

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

Commenter la réponse de 1Seb
0
Merci
Allélouyaaaaaaa sa marchais pas a cause de la meta pas fermer x), merci à tous les amis
Commenter la réponse de Serken