Position header et menu côte à côte

16 juillet 2019 à 10:37:40

Bonjour,

Dans le cours HTML & CSS, j'arrive à positionner le header et le menu côte à côte mais les éléments de la liste apparaissent eux aussi en ligne et non plus en colonne et je ne sais pas comment corriger ça.

Voici le code HTML

    <body>
        <div id="topsection">
        <header>
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
        </header>

        <nav>
        <ul id="menu">
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Archives</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        </nav>
      </div>

Voici le code CSS

ul
{
list-style-type: none;
}

#topsection , #menu
{
display: flex;
flex-direction: center;
}

Merci d'avance !

Mewen_bzh

16 juillet 2019 à 10:42:01

Salut,

Le menu se met en ligne parce que tu lui demandes de le faire en ciblant l'id "menu" :

#topsection , #menu
{
  display: flex;
  flex-direction: center; 
}

Si tu ne veux pas que cela se produise, il suffit de ne pas appliquer cette propriété à cet élément.

Je ne réponds pas aux messages privés.

LucileMez

16 juillet 2019 à 13:37:58

Super, merci beaucoup !

J'ai ôté l'élément #menu et c'est tout bon.

En revanche, je ne comprends pas pourquoi les éléments #topsection et #menu se retrouvent alignés alors que la fonction flex est attribuée uniquement à l'élément #topsection... ?

#topsection
{
display: flex;
flex-direction: center;
}

(modification dans la fichier CSS, le code HTML reste le même)