Problème de code html/css

Fermé

Matprox - Modifié le 10 févr. 2020 à 11:55
declique69 - 19 févr. 2020 à 08:56

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

A voir également:

Problème de code html/css
Code ascii de a - Guide
Code de déverrouillage oublié - Guide
Code puk bloqué - Guide
Code activation windows 10 - Guide
Editeur html - Télécharger - HTML

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38470 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 avril 2025 4 742
10 févr. 2020 à 11:56

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é

Matprox
10 févr. 2020 à 12:01

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é

Réponse 2 / 5

jordane45 Messages postés 38470 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 avril 2025 4 742
Modifié le 10 févr. 2020 à 12:17

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.

Réponse 3 / 5

Matprox
10 févr. 2020 à 12:05

Ce que je veux faire c est rendre indépendante chaques balises <li> pour pouvoir changer la taille , la police ... de chacunes.

Réponse 4 / 5

Matprox
10 févr. 2020 à 16:37

Très bien merci

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

declique69
Modifié le 19 févr. 2020 à 08:57

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

Discussions similaires

sertissage des cables rj45

Code de renvoi d'appel : Ooredo, Mobilis...