28172 sujets

CSS et mise en forme, CSS3

Barre de menu adaptative

bonjour,
je crée un site internet et j'essaye d'avoir une barre de menu qui peut s'adapter a n'importe quel écran. La barre de menu contient un titre à gauche et je veux qu'il y ait les différents choix du menu à droite et qu'ils s'adaptent sans retourner à la ligne en fonction de la taille de la fenêtre.

Je vous mets ci-contre mes codes, est-ce que quelqu'un saurait comment régler le problème ?
voici une partie de mon code html :

<div id="barre_statique">
        <!-- titre -->
        <span>
            <?php
                // si on est sur la première page alors on ne peux choisir que sur quelle entrprise aller.
                if($_SESSION['page'] == 0 || $_SESSION['page'] == 2){
            ?>
                <h1 class="nom_General">Béchet Ind.</h1>
            <?php
                }
                elseif($_SESSION['page'] == 1){
            ?>
                <h1 class="nom_General">Drescreen</h1>
            <?php
                }
            ?>
        </span>

        <?php
            // si on est sur la première page alors on ne peux choisir que sur quelle entrprise aller.
            if($_SESSION['page'] == 0){
        ?>
            <!-- lien pour acceder aux entreprises + compte -->
            <nav id="nav1">
                <ul id="choix_menu">
                    <li>
                        <a class="choix_1" href="">Nos entreprises</a>
                        <ul class="sous_choix_1">
                            <li><a href="drescreen/accueil_drescreen.php">Drescreen</a></li>
                            <li><a href="">coming soon</a></li>
                            <li><a href="">same</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="choix_menu2">
                    <li>
                        <a class="choix_1" href="">Mon compte</a>
                        <?php
                            if($user !== "")
                            {
                        ?>
                        <ul class="sous_choix_1">
                            <li><a href="">Paramètres</a></li>
                            <li><a href="profile/deconnexion.php">Déconnexion</a></li>
                        </ul>
                        <?php
                            }
                            else{
                        ?>
                        <ul class="sous_choix_1">
                            <li><a href="profile/compte.php">Creation</a></li>
                            <li><a href="profile/connexion.php">Connexion</a></li>
                        </ul>
                        <?php
                            }
                        ?>
                    </li>
                </ul>
            </nav>

et voici mon code css :
/* partie qui modifie le header */
    header{
        margin-left: -10px;
        margin-right: -10px;
        height: 50px;
        background-color: rgb(231, 175, 110);
    }

    h1{
        margin-left: 20px;
    }

    #barre_statique{
        margin-top: -8px;
        width: 100%;
        z-index: 4;
        position: sticky; /* fixed */
        background: rgb(231, 175, 110);
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .nom_General{
        display: inline;
    }

    header #nav1{
        display: inline-block;
        /*height: auto;
        max-height: 100%;*/
        margin-left: 50%;
    }

    header #nav2{
        display: inline-block;
        /*height: auto;*/
        margin-left: 25%;
    }

    header #nav3{
        display: inline-block;
        /*height: auto;*/
        margin-left: 20%;
    }

    .choix_1, .choix_2, .choix_3, .choix_4{
        padding: 5px 40px;
        color: hsl(226, 81%, 55%);
        border: 1px solid hsl(226, 81%, 55%);
        border-radius: 50px;
        font-size: 17px;

        text-decoration: none;
        list-style-position: initial;
        list-style-image: initial;   
    }

    #choix_menu, .choix_menu2{
        display: inline-block;
        line-height: 1em;

        list-style-type: none;
    }

    /* menu déroulant */
    nav ul{
        list-style-type: none;
        display: flex;
    }

    nav ul li{
        flex: 1 1 auto;
        text-align: center;
        position: relative;
    }

    nav a{
        display: block;
        text-decoration: none;
        color: rgb(58, 107, 211);
        border-bottom: 2px solid transparent;
    }

    nav a:hover{
        color: rgb(41, 64, 167);
        border-bottom: 2px solid rgb(41, 64, 167);
    }

    .sous_choix_1{
        display: none;
        /*box-shadow: 0px 1px 2px #CCC;*/
        /*background-color: rgb(231, 175, 110);*/
        position: absolute;
        z-index: 10;
    }
    nav > ul li:hover .sous_choix_1{
        display: flex;
        flex-flow: column wrap;
    }
    .sous_choix_1 li{
        flex: 1 1 auto;
        text-align: center;
    }
    .sous_choix_1 a{
        padding: 10px;
        border-bottom: none;
        /*padding: 5px 40px;*/
        color: hsl(226, 81%, 55%);
        border: 1px solid hsl(226, 81%, 55%);
        background-color: rgb(231, 175, 110);
        border-radius: 50px;
    }
    /* lorsque qu'on passe la souris sur un des sous menus */
    .sous_choix_1 a:hover{
        border-bottom: none;
        /*background-color: RGBa(200,200,200,0.1);*/
        background-color: rgb(231, 175, 110);
        color: rgb(41, 64, 167);
        border-bottom: 2px solid rgb(41, 64, 167);
    }
    .deroulant > a::after{
        font-size: 12px;
    }

Modifié par gcyrillus (27 Jul 2021 - 21:12)
Modérateur
Bonsoir,

Je viens d'éditer ta question afin que les codes soient lisible sur le forum, pense à le faire (ici ou ailleurs) pour avoir plus facilement l'aide d'un autre utilisateur du forum.

En regardant ton code, un premier truc me saute aux yeux: un <span> qui englobe un <h1> . Pour une balise neutre, ici il te faut utiliser un <div> car un span n'est supposé contenir que du texte ou d'autre éléments en ligne (img,a , label, ...).

Tu utilise flex sur quelques éléments , mais aussi inline et inline-block. Il faudrait choisir une méthode et t'y tenir plutôt que d'en mélanger plusieurs et de perdre le fil . Par exemple , flex fils d'un block ou d'un inline-block ne bénéficie pas du même espace d'affichage ni pour aligner ses enfants.

Tu utilises aussi position:sticky: mais apparemment sans coordonnées d'ancrages . est ce top:0; ou left:0; ou ?

Dans les styles que tu partages et le HTML , header est absent par exemple.
peut tu réduire ou remettre à jour tout le code qui te pose problème ou faire une demo sur https://codepen.io/pen ou https://jsfiddle.net ou autre outil en ligne que tu prefere ?

Cdt
Sujet clos
Aller à