css Problème avec Flexbox, je deviens fou...

HenriK

Membre
Bonjour,

Toujours dans la conception de mon site web, je rencontre un problème avec Flexbox.
J'ai créé un <div> avec un attribut header pour la mettre en forme avec CSS, mais malgré que la <div> soit bien fermée tous les éléments en dessous sont quand même pris en compte par la flexbox de <div id="header">

HTML
<div id="header">
    <a href="url"><img src="url/images"</a>
    <h1>
       Titre du site
    </h1>
</div>

<nav>
    <a href="#">lien 1</a>
    <a href="#">lien 2</a>
    <a href="#">lien 3</a>
</nav>

CSS
#header {
    display: flex;
    flex-direction: column;
}

La barre de navigation est sous le coup du flex et vient se positionner à côté de l'image et du titre alors qu'elle devrait être en dessous non ? C'est quoi le problème ??
 

Jack

Membre
Salut Henrik, lorsque tu as tapé ton code HTML dans la fenêtre de code n'as-tu pas remarqué les tags en rouge ?
Les fenêtres de code sur le forum détectent automatiquement les erreurs de syntaxe, cela peut aider.

Capture d’écran 2020-11-13 232425.png


Hé hé...
 

Ces discussions pourraient vous intéresser...

Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Hello, J'ai créé un formulaire avec Bootstrap mais j'ai un problème de mise en forme. Les <input> prennent chacun leur propre ligne alors que j'aimerais que certains soit côte à côte. Je ne parviens pas du tout à faire ce que je veux et je ne trouve rien dans la documentation...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Haut