bonjour, 

Je me creuse la tête et je me retrouve dans une impasse, j'ai fait un menu flexbox mais les liens dépassent de l'écran, j'ai tenté de rajouter width:100% dans le nav et dans le nav ul mais sans succès.

je débute totalement et j'ai encore un peu de mal avec flexbox.

html:

    <nav>
        <div>
        <h1>D&amp;D Helper</h1>

        <div>
        <ul>
            <li><a class="menu" href="index.html">Accueil</a></li>
            <li><a class="menu" href="rules.html">Règles</a></li>
            <li><a class="menu" href="races.html">Races</a></li>
            <li><a class="menu" href="classes.html">Classes</a></li>
            <li><a class="menu" href="sorts.html">Sorts</a></li>
            <li><a class="menu" href="crea_perso.html">Création de personnage</a></li>
            <li><a class="menu" href="map.html">Carte du monde</a></li>
        </ul>
    </nav>

et le css

*{
    margin: 0; padding: 0; box-sizing: border-box;
}
a{
    text-decoration: none;
}
nav {
    background-color: black;
    color: red;
    padding: 10px;
    display: flex;
    justify-content: left;
    position: sticky;
    top: 0;
    height: 100px;
}
nav ul{
    display: flex;
    align-items: center;
    list-style-type: none;
    justify-content: space-between;
}
nav ul li a{
    display: block;
    text-align: center;
    color: whitesmoke;
    margin: 15px;

}
nav ul li a:hover{
    display: block;
    background-color: whitesmoke;
    color: black;
    transition: 0.7s;
    padding: 5px;
    border-radius: 5px;
}

Soyez indulgent, c'est le tout premier site que je fais 

Bonjour,

Pour ceci c'est NON

            *{
                margin: 0; padding: 0; 
            }

Reset au cas par cas, Lire mon message sur ce sujet à ce propos.

Pour que les liens passe à la ligne, tu peux ajouter :

                flex-wrap: wrap;

Sur l'ul.

Tu as une class menu dans ton HTML, tu ne t'en sert pas dans le CSS pourquoi? Utilise de préférence des class comme sélecteur plutôt que les sélecteur HTML, en effet tu auras peut être plusieurs navigations avec une liste dans ton site. Tel qu'écris la tu cible toutes les navigations du site.

Pour en savoir plus sur flexbox :

• https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
• https://la-cascade.io/articles/flexbox-guide-complet

Pour s’exercer : https://flexboxfroggy.com/#fr 

PS : Pour faire du mobile tu dois ajouter la balise meta viewport et des media queries.

-
Edité par AbcAbc6 10 septembre 2022 à 3:18:40

Effectivement avec flex-wrap c'est parfait.

Pour ce qui est de la class menu, j'avais fait un premier menu sans flexbox, et je n'ai pas réutilisé cette class par la suite, pourquoi ? Et bien je ne sais pas, il m'a semblé plus logique d'utiliser les sélecteurs html sur le moment, mais effectivement il vaut mieux que je prenne les bonnes habitudes dès maintenant.

Merci pour ta réponse très complète, je vais me pencher sur tout ça.