[Résolu] Problème barre de navigation dans mon template

vinc[E]

Bonjour à tous, je vais utiliser ce template pour un futur projet :
https://github.com/haroflow/ms-dos-css

Le problème est le suivant, j'aimerais que les éléments de la barre de navigation se mettent en dessous lorsque la fenêtre se réduit car actuellement lorsque l'on réduit la fenêtre, il y a un ascenseur horizontal.

Merci beaucoup pour vos pistes

bazooka07

Quelqu'un qui utilise Flexbox ! Quelle bonne idée.

Tu trouveras la réponse avec ce lien :
https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Si tu donnes un poisson à un homme, il mangera un jour. Si tu lui apprends à pêcher, il mangera toujours.
Proverbe chinois ou africain selon les dires.

Gzyg

Salut,

@ vince : commence par remplacer toutes les div inutiles de la barre de navigation par de vraies listes, ça sera plus simple et plus propre.

@ bazooka07 : je crois que tu t'es réjouis un peu trop vite quant à l'utilisation de flexbox sur ce template...


à plus,

Gzyg

bazooka07

@gzyg,

[== CSS ==]
.menubar {
  flex-wrap: wrap;
}

Testé sous Firefox, Chromium, Vivaldi, Opéra.
Pas de Edge sous le coude.
Reste les mobile.
Mais d'après le site caniuse, pas de souci

Reste les mobiles

J'avoue ne pas avoir regardé avant le code source de la page. C'est vraiment la misère. Il ne devrait pas accepter cela chez Github.

Pourtant il y a des bons tutos chez OpenClassroom:
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page

kowalsky

Sans vouloir ôter le poisson de la bouche de vince, je dirais bien :

.menubar {
flex-wrap: wrap;
}


Sinon, ya la méthode à l'ancienne (mais ça rend pas beau en l'état sur le sous-menu)

.menubar {
display: inline-block;
}
.menubar .menu-item {
display: inline-block;
}


Édit : ah ben zut, même plus le temps de pêcher par ici, bazooka07 était déjà repassé par là... (au moins je m'étais pas planté)

vinc[E]

@bazooka07 : Merci pour les liens et le code, ça marche nickel !

J'ai aussi trouvé ce tuto en voulant approfondir un peu Flexbox :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Merci à tous pour votre aide.