[RÉGLÉ] Barre de menus trop courte, ou trop longue

[zebulon21]

Bonjour,
J’ai un souci de longueur avec la barre de menus verticale (voir ICI).


Dans un premier cette barre était trop courte car s’adaptait à ce qu’elle contenait au lieu d’adopter la taille du contenu de la page. Après avoir testé plusieurs solutions, celle-ci permet d’allonger le menu :

.t3-mainbody {
    overflow: hidden;
}

div.t3-sidebar.t3-sidebar-left.col-md-3 {
    margin-bottom: -999em !important;
    padding-bottom: 999em !important;
}

Par contre avec ce code la barre devient trop longue car on ne voit plus la bordure inférieure avec les coins arrondis.


J’ai l’impression qu’il manque pas grand-chose pour y arriver, mais quoi ?

Merci par avance pour l'aide.

[zebu59]

Re : Barre de menus trop courte, ou trop longue

Bonjour,

J'ai regardé vite fait.
Comme ton menu est installé sur la page brute, celui s'étale en hauteur de 15000 pixels.
Tu devais délimité au départ ta zone de travail 1ere page pour éviter que tes commentaires partent vers l'infini vertical.

Maintenant perso (et là c'est une histoire de gout), j' ajusterai ton menu au contenu, celui-ci se réglera automatiquement au fur et à mesure que tu mettras du contenu. esthétiquement ce sera mieux qu'un grand menu vide non ?

[zebulon21]

Re : Barre de menus trop courte, ou trop longue

Merci de t’être penché sur le problème mais je n’ai pas compris ta suggestion de « délimiter la zone de travail » ?

D’origine la barre de menu s’adapte au contenu et le résultat n’est pas très esthétique lorsqu’il y a un vide dessous (j’ai noté ton avis contraire). Ce qu’il faudrait c’est que cette barre comble ce vide, même lorsque son contenu n’est pas suffisant.

Comme dit précédemment, j’ai trouvé un code qui permet d’allonger la barre mais cette fois-ci elle passe derrière la zone de commentaires (cas de la page d’accueil) ou derrière le breadcrumb (cas des autres pages). En fait il faudrait qu’elle vienne en butée comme ceci :

[zebu59]

Re : Barre de menus trop courte, ou trop longue

bon ok, la solution pour deja fixer ton menu au dimension est de passer ton padding-bottom à 78em au lieu de 999em.

Il serait plus clean de recreer une div afin de fixer les limites de ton menu.

Bon courage, en tout cas ton contenu semble très intéressant (me suis permis de visiter un peu)

[zebulon21]

Re : Barre de menus trop courte, ou trop longue

Merci Zebu mais apparemment ton padding-bottom à 78em n’est pas compatible avec le mode "responsive" car ça ne fonctionne qu’avec une seule taille d’écran et à condition de ne pas jouer avec la fenêtre du navigateur.

Il faut penser aussi que le menu doit s’adapter à son contenu qui varie d’une page à l’autre.

Je crois en effet que la soluce passe sans doute par la création d’une DIV supplémentaire, j’ai vu ça sur d’autres forums, mais c'est pas facile à mettre en œuvre, sans cas concret, pour un webmaster bénévole du dimanche…

[zebu59]

Re : Barre de menus trop courte, ou trop longue

Me concerne, je travaille plus sur des cadres de templates prédéfinis.

Le soucis pour toi je pense c'est que tu travaille sur une zone non définie au départ (donc qui supposera que tu n' aura pas de pagination), tes posts sur le blog s' étaleront à l' infini vers le bas ce qui n'est pas forcément esthétique.

Il faut que tu définisse une zone de travail (ce qu'on nome la partie body du html) et c'est seulement dans cette zone que tu définiras tes differents emplacements par rapport à cette zone (on parle de position static, relatif, absolue).

Perso fait comme moi sur google tape "tuto css a telecharger" et tu va mieux comprendre et surtout gagner beaucoup de temps.

regarde ca :

http://css.developpez.com/cours/

[zebulon21]

Re : Barre de menus trop courte, ou trop longue

tes posts sur le blog s' étaleront à l' infini vers le bas ce qui n'est pas forcément esthétique.

Hééé bééé non, le nombre de commentaire se règle dans l'administration du module, que j'ai fixé dans le cas présent à 9, ils ne se poursuivront donc pas à l'infini.

Je comprends bien ta démarche mais, perso, je viens d'évacuer l'ancien template statique traditionnel pour passer au "responsive" (pages adaptables à toutes les résolutions d'écrans).

Je n'y connais pas grand chose, n'étant qu'un amateur du dimanche, mais je fais quand même gaffe à ne pas perdre l'intérêt de cette évolution en ajoutant du CSS "récessif".

On peut facilement vérifier l'impact du code ajouté en faisant varier la taille de la fenêtre du navigateur par simple glissement dans tous les sens. Je passe ainsi du grand écran (24") au plus petit des smartphones et c'est ainsi que j'ai vu que ton padding-bottom posait problème.

Je te dirai ici si je trouve la solution.

Merci quand même d'avoir essayé.

[zebulon21]

Re : Barre de menus trop courte, ou trop longue

Ouf,
Solution trouvée en parcourant le guide Flexbox sur https://la-cascade.io/flexbox-guide-complet/

/* Occupation de 100% de la hauteur */

div#t3-mainbody.container.t3-mainbody div.row {
    display: flex;
    }

div.t3-sidebar.t3-sidebar-left.col-md-3 {
    display: flex;
    flex-direction: column;
}

Heureusement que je fais ça à mes heures perdues, vu le temps que j'y ai passé...