Impossible de lié mon css a mon html

Résolu

Serken -
Serken - 14 juin 2019 à 13:49

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;
  
}

A voir également:

Impossible de lié mon css a mon html
Editeur html - Télécharger - HTML
Espace html ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
/Var/www/html/index.html ✓ - Forum Linux / Unix
Html download - Télécharger - HTML

4 réponses

Réponse 1 / 4

Utilisateur anonyme

bonjour,
et si tu mettait le css dans la feuille HTML ?
avec la balise </style>
comme sur la capture d'ecran:

Serken

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

Réponse 2 / 4

jee pee Messages postés 41508 Date d'inscription Statut Modérateur Dernière intervention 9 712

Salut,

Il manque la balise <body>

Serken

Bonjour, il y a bien une balise body, juste une erreur dans le copier coller du post

Réponse 3 / 4

1Seb Messages postés 166 Date d'inscription Statut Membre Dernière intervention 38

Bonjour,

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

Réponse 4 / 4

Serken

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

Discussions similaires

Votre réponse

Discussions similaires