Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme flex-box

probleme flex-box

    16 juin 2018 à 10:34:15

    Bonjour à tous,  je me remet à vous car à peine commencé une nouvelle page web, je bloque...

    Je vous explique,j'aimerai faire une barre avec des lien, comme dans les grands sites (comme quand on utilise display: iline-block)mais avec flex-box mais j'ai éssayer tous ce que je connaissai et qui devait marcher !Alors je vous pose 2 questions :

    1) Ai-je une erreur dans le code qui empeche flex-blox

    2)Ou alors, quelle commande utiliser...

    voici mon code, merci d'avance

    html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="acceuil.css">
    </head>
    <body>
    <ul id="barre">

    <li class="lien1">
    <a target="_blank" href="../acceuil/acceuil.html">
    Acceuil
    </a>
    </li>
    <li class="lien1">
    <a target="_blank" href=".html">
    Acceuil
    </a>
    </li>
    <li class="lien1">
    <a target="_blank" href=".html">
    Acceuil
    </a>
    </li>
    <li class="lien1">
    <a target="_blank" href=".html">
    Acceuil
    </a>
    </li>
    <li class="lien1">
    <a target="_blank" href=".html">
    Acceuil
    </a>
    </li>


    </ul>






    </body>
    </html>

    ps : je sais que les autres lien ne sont pas compléter

    css:

    #barre
    {
    list-style: none;
    text-decoration: none;
    background-color: dimgray;
    height: 70px;
    }

    .lien1
    {
    display: inline-block;
    justify-content: space-around;
    }

    a:link
    {
    text-decoration: none;
    }
    • Partager sur Facebook
    • Partager sur Twitter
      16 juin 2018 à 10:40:39

      Hello :)

      Premièrement, en effet tu as appliqué un display sur tes liens mais tu dois appliquer le display:flex sur le conteneur pour que cela soit pris en compte :)

      Si ta "barre" comme tu dis, sert de menu, je te conseille de mettre ton <ul> dans des balises <nav> et ensuite appliquer une propriété display : flex sur ton <nav> (qui sera ton conteneur)

      Petite précision, un inline-block n'est pas forcément nécessaire, juste "inline" surffira pour faire un alignement horizontal 

      • Partager sur Facebook
      • Partager sur Twitter
        16 juin 2018 à 14:57:50

        Avec flexbox pas besoin de mettre tes liens dans un <ul><li>  des div suffisent et tes class lien1 sont inutile et surchargent le code.  Les id sont de préférence à utiliser pour les ancres et javascript pour le reste utiliser des class est plus simple.  Et c'est accueil et non acceuil :)

        -
        Edité par Zoki_Marciano 16 juin 2018 à 15:00:09

        • Partager sur Facebook
        • Partager sur Twitter
        Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

        probleme flex-box

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown