Problème de code html/css

Signaler
-
 declique69 -
Bonjour, j' ai un problème qui est que je souhaite mettre deux class dans une seule balise mais, dans mon code css, je ne sait pas comment faire.

Voilà mon code si vous voulez :
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Titre</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
    </style>
  </head>
  <body>
    <?php
      include'navbar.php'; 
     ?>
    <h1>Mon site!</h1>   
  </body>
</html>



<link rel="stylesheet" type="text/css" href="css/navbar.css">
<nav class="menu-nav">
   <ul>
     <li class="btn menu-acceuil">
      <a href="#">
       Acceuil
      </a>
     </li>
     
     <li class="btn">
      <a href="news.html">
       Actualités
      </a>
     </li>
     
     <li class="btn">
      <a href="contact.html">
       Contact
      </a>
     </li>
   </ul>
 </nav>

Pour info, c' est au "<li class="btn menu-acceuil">" que galère.


h1.headline{
 color: black;
 font-size: 50px;
}

nav.menu-nav ul li.btn a{
 color: black;
 background-color: white;
 text-decoration: none;
}

nav.menu-nav ul li.btn{
 list-style-type: none;
 display: inline-block;
}

nav.menu-nav ul li.btn:hover a{
 color: grey;
 background-color: white;
 transition: 1.5s all;
}

li {
 font-size: 20pt;
 padding: 5px 20px;
}

5 réponses

Messages postés
27719
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 février 2020
2 151
Bonjour,

1 - Ta question concernant le css ... je la déplace dans le forum CSS.

2 - En quoi mettre deux class dans un élément html te pose problème ?
Tu n'expliques pas ton souci.. tu dis juste que ça galère...
Hors..; à moins d'être devin.. il va nous être difficile de comprendre ton souci.
Donc, merci d'expliquer EXACTEMENT le problème constaté
Salut jordane en fait j ai lu qu' il fallait laisser un espace pour mettre deux classes mais c' est dans le code css que ça bloque:
j' ai fait:
.(classe) {
color: red;
}
J ai enregistré et actualisé ma page mais sa n' a rien changé
Messages postés
27719
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 février 2020
2 151
Donc tu veux cibler le li qui a les deux class
btn menu-acceuil


Dans ce cas,
li.btn.menu-acceuil{
 
}


Bien entendu, après toute modification de CSS (ou de JS ) il faut vider le cache de ton navigateur pour être sûr que les modifications sont prises en compte.

Cordialement,
Jordane
Ce que je veux faire c est rendre indépendante chaques balises <li> pour pouvoir changer la taille , la police ... de chacunes.
Très bien merci
Le plus simple sera peut-être d'utiliser un sélecteur par numéro d'élément. Cela évitera de devoir associer une classe à chaque balise <li>

On peut écrire

li:nth-child(1) {... styles...}
li:nth-child(2) {... styles...}
Etc.

Voir le sélection nth-child :
http://stylescss.free.fr/v2-selectors/child.php