PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

Annonce

/* HaCKeD By ifactoryx Dimanakah adanya keadilan Bila masih memandang golongan Yang kuat selalu berkuasa Yang lemah pasti merana :>( */

#1 04/03/2018 19:05:38

vinc[E]
Membre
Inscription : 18/06/2012
Messages : 39

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

Bonjour à tous, je vais utiliser ce template pour un futur projet :
https://github.com/haroflow/ms-dos-css
Je l'ai mis en ligne ici :
http://mle01.free.fr/test1/

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

Dernière modification par vinc[E] (05/03/2018 16:32:38)

Hors ligne

#2 04/03/2018 20:26:02

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 005
Site Web

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

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

Tu trouveras la réponse avec ce lien :
https://www.alsacreations.com/tuto/lire … odule.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.

Hors ligne

#3 04/03/2018 23:30:11

Gzyg
Membre
Inscription : 25/09/2006
Messages : 870
Site Web

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

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... smile


à plus,

Gzyg

Dernière modification par Gzyg (04/03/2018 23:30:30)

Hors ligne

#4 05/03/2018 01:02:20

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 005
Site Web

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

@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/appr … er-sa-page

Dernière modification par bazooka07 (05/03/2018 01:27:20)

Hors ligne

#5 05/03/2018 01:18:50

kowalsky
Membre
Inscription : 20/08/2015
Messages : 320
Site Web

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

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é) smile

Dernière modification par kowalsky (05/03/2018 01:22:48)

Hors ligne

#6 05/03/2018 16:32:06

vinc[E]
Membre
Inscription : 18/06/2012
Messages : 39

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

@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.

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés