Bonjour,

Je voudrais mettre le menu en couleur mais je sais pas quelle classe choisir, on peut m'aider et m'expliquer?

Car l'actuelle me colorie presque toute la page or je veux que le menu.

Merci

<!--MENU-->
            <div class="row">
                <div class="col-md-12 menu">
                    <div class="main-menu rounded-top">
                        <nav class="navbar navbar-expand-md">
                        
                            <button class="navbar-toggler" type="button" 
                            data-toggle="collapse" data-target="#navbarsExampleDefault" 
                            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                            </button>

                            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                                <ul class="navbar nav mr-auto">
                                    <li class="nav-item active">
                                    <a class="nav-link" href="{{route('home')}}">Home 
                                    <span class="sr-only">(current)</span>
                                    </a>
                                    </li>

                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Notre catalogue</a>
                                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                                    </div>

.col-md-12{
    background-color:lightblue;
}

Salut, 

Ce que tu observes est normal : tu appliques ton style à tous les éléments portant la classe col-md-12. Il doit y en avoir beaucoup dans ton projet...

Ton menu est dans une div qui a également la classe "menu" donc tu peux te contenter d'appliquer ton style à cette classe. 😉

Salut,

Mais j'ai deux fois le mot 'menu' ligne 3 et ligne 4 lequel choisir donc?

J'ai compris le principe merci de ton explciation mias comment je le présente dans mon fichier css?

.col-md-12 menu{...}

.main-menu{...}

.main-menu rounded-top{...}

Et question à part, c'est possible de regrouper plusieurs classes? Exemple: l.21 nav-item dropdown et l.22 nav-link dropdown-toggle

plusieurs et enfin dernière question: quand on a une classe avec plusieurs mots comme ça class="navbar nav mr-auto" comment on la présente dans le css niveau syntaxe?

Merci beaucoup :) 

pour la couleur du menu, utilise la balise nav, c'est le plus addapté (normallement si tu fais les choses logiquement nav c'est pour navigation).

pour les class multiples : class="navbar nav mr_auto",

et bien c'est juste les trois CSS qui seront apliqués donc ça :

navbar
{
    font-size:3em;
}
nav
{
    color: red;
}
mr_auto
{
    background:blue;
}

ça va te donner une balise a fond bleu ecrite en rouge aavec une ecriture de taille 3em

merci,

deux choses ne sont pas clair,

1. si je veux regrouper les classes l.21 et l.22 dans le css on fait comment? comme ça?

.nav-item dropdown nav-link dropdown-toggle{

background-color:red;

}

2. le nav que tu as pris toi c'est dans quelle ligne car il y a des nav partout?

Merci de ton aide 

-
Edité par ellyse 13 février 2019 à 10:33:23

Comment tu le présentes dans ton fichier CSS ?

A toi de voir selon ce que tu veux précisément mettre en couleur. Il te suffira de cibler correctement ton élément.

Possible de regrouper plusieurs classes ?

Je suppose que tu veux dire appliquer le même style à plusieurs classes ? SI oui, c'est effectivement possible et très simple. Il suffit de faire quelque chose du style :

.classe_1, .classe_2 {
    // Ton style
}

Ainsi le même style sera appliqué à .classe_1 et à .classe_2. Attention à ne pas oublier la virgule sinon le navigateur cherchera à cibler un élément avec la .classe_2 qui serait contenu dans l'élément .classe_1.

Comment faire avec un nom de classe qui contient plusieurs mots ?

Impossible. Un nom de classe ne doit pas comporter d'espace.
Dans ton exemple class="navbar nav mr-auto", ton élément n'a pas une classe nommée "navbar nav mr-auto" mais trois classes différentes : la classe "navbar", la classe "nav" et la classe "mr-auto"

Je te conseille de suivre le cours basique sur le HTML et le CSS, tu devrais y trouver les bases et les concepts de départ pour comprendre tout cela : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3