[Test – CSS] Mise en page du menu

Le problème de base était le suivant: dès que l’écran s’élargit un peu (ex: n’importe quel ordinateur), l’affichage des articles s’étire trop en largeur et devient illisible. Il faudrait donc limiter son espace disponible.

Premier essai: on met une largeur max de 1200px au body.

=> raté, du coup tout a une large limitée.

Second essai: on crée une division (nommée « contenu-principal ») qui va englober le les filtres et articles et on lui donne une width de 1200px.

Encore raté: on limite la largeur de division des filtres.

La solution est de donner max-width: 1200px au contenant des articles. Problème: du coup ce n’est plus aligné !

[Les problèmes d’alignement sont une des grosses difficultés pour les débutants]

Pour résoudre cela, j’ai ajouté transformé la division « contenu principal » en flexbox:

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;

Mais ça ne marchait pas.

Il fallait en fait utiliser « align-items: center; » :

Ceci fait, il restait un souci: le menu devenait du coup assez moche.

J’ai donc voulu faire la même chose pour le menu, pour qu’il se termine au même niveau que les articles.

Premier essai: on met     max-width: 1200px; à #barre-principale. Raté: cela réduit la largeur de toute la barre.

La solution la plus simple serait d’encapsuler mon menu dans une div, mais je voulais voir si je trouvais une solution sans cela.

A la place, j’ai décalé le problème et place la propriété box-shadow (la bordure un peu floue qu’on voit) sur la division header ! Je l’ai également mis en flexbox, comme la division #contenu-principal vue plus haut.

Inutile de préciser que ça n’a pas marché …

Je mets « width » au lieu de « max-width » [= il ne prenait en fait que le minimum de place] pour le menu principal et 100% comme width pour le menu secondaire.

On se retrouve avec ce qu’on voulait, mais, et c’était prévisible, il faut aussi reprendre le menu du haut.

La précédente pirouette ne marchera pas …

Je suis donc revenu sur ma brillante idée et j’ai encapsulé les deux menus dans une division ( :'( ).

En outre, j’ai réalisé que mettre une width de 1200 faisait que les changements de largeur d’écran étaient vraiment laides. On n’est pas encore à trop s’en préoccuper, mais cela peut poser problème par la suite. (voir ci-contre)

J’ai donc, à la place, mis ces propriétés :

•     width: 1000px;
•     max-width: calc(100vw – 30px);

Ainsi, le bloc prend par défaut 1000px de large, jusqu’à 100vw (=largeur de l’écran) -30px (pour laisser respirer).