Alignement horizontal du menu principal

Bonjour,

Actuellement, le menu principal se comporte un peu bizarrement en fonction de la taille de l’écran :

C’est ni vraiment centré, ni vraiment aligné à gauche.

Du coup, on va faire un sondage.

• Si vous voulez l’aligner à gauche, mettez +1 à ce message.
• Si vous voulez le centrer, mettez -1 à ce message.
• Si vous voulez autre chose, commentez.

Voilà ce que ça donnerait :

Merci.

EDIT : Ajout d’aperçus et merci vhf

EDIT 2 : Je viens de changer la première image parce qu’il était trop à gauche dessus

Sous Firefox 54 (Windows) dernière version, je n’ai pas ce rendu.

EDIT : Avec la même taille d’écran.

Que veut-tu dire par « Avec la même taille d’écran » ?

1920x1080 c’est bien la résolution de ton écran non ? (L’image faisait 1903px, j’ai conclu que c’était la même résolution).

C’est vrai que ton affichage est curieux motet-a.

Gardez bien en tête qu’on n’a pas forcément la même densité de pixels — de plus, j’ai réglé mon navigateur avec une densité de pixels un peu inférieure à celle de mon écran (un léger zoom par défaut quoi). Du coup c’est difficilement comparable comme ça.

EDIT :

En fait, pour faire ces screenshots, j’ai dû zoomer ou dézoomer pour “simuler” une taille d’écran différente. Mais encore une fois, partez du principe qu’il n’y a pas de relation entre taille en pixels et taille d’écran en centimètres dans ce post.

Quand tu dezoomes ça déforme le rendu et ça casse le css. Je n’ai jamais vu de site où le résultat du Zoom correspond à la réalité. Tout ça pour te dire que cette option est inefficace.

Dans les outils de dev du navigateur, on peut définir une taille pour mobile, il doit être possible de faire l’inverse.

Ça serait bien de nous donner les détails techniques (largeur en pixel) pour la situation.

Avant, avec des vieux navigateurs, c’était le cas.

Mais maintenant, avec Chrome et un viewport correctement défini c’est quasiment la même chose. Ça fait bien longtemps qu’un “pixel” en CSS n’est pas forcément égal à un pixel physique de l’écran.

Puis typiquement, je trouve qu’on a généralement bien plus de différences de rendu entre deux navigateurs qu’entre deux niveaux de zoom différents de Chrome. Donc bon.

Ça serait bien de nous donner les détails techniques (largeur en pixel) pour la situation.

Si tu veut, je referrais d’autres screenshots avec le même DPI et une taille indicative en “pixels” CSS. Mais ça n’a rien à voir avec les pixels physique d’un écran.

Le DPI rend peut-être une image de meilleure qualité mais là on parle de CSS. Si on n’a pas d’élément chiffré, on ne peut pas reproduire le rendu, ni le corriger.

On ne connait pas le navigateur que tu as utilisé, on ne connait pas la largeur de la page à partir du quel on a ce problème (qui pour l’instant ne vient que de chez toi), etc… Avec vhf, on n’obtient pas le même rendu, donc le rendu que tu as actuellement est peut-être un bug.

Le CSS est calculé à partir d’une largeur calculé en pixel (unité de mesure). Une page de largeur 1500px n’aura pas le même support qu’une page 900px.

Alors :

Et en bonus, j’ai écrit un patch et voici ce que ça donnerait aligné à gauche (notez que ce n’est pas encore bien testé, il peut y avoir des bugs).

Le site est assez mal adapté à cause des dimensions relatives (en pourcentage) et non en absolute.

(notez que ce n’est pas encore bien testé, il peut y avoir des bugs).

Le décalage à gauche est volontaire.

Solution stable

Normalement c’est possible de régler ça sans trop modifier le css ou avoir des problèmes de support :

Pour le décalage à gauche c’est le margin-left: 5%; du nav#menu il serait nécessaire de rajouter une règle CSS @media (pour les écrans <2000 px). Pour l’espace entre les éléments (li) du menu, il faut mettre un max-width:750px; (pour largeur de page > ~2000px) sur nav#menu.

Pendant qu’on y est :.main .sidebar { max-width: 420px; }

Rendu actuel réel en 1920x2 px (soit 3840 px de largeur) :

J’ai ouvert un ticket : https://github.com/zestedesavoir/zds-site/issues/4458 .

On est en train de corriger tous ces problèmes de CSS

Concernant ce vote, voici les résultats le 6 août :

Du coup, le menu est centré sur la bêta.

Désolé du retard, j’ai oublié de marquer le sujet comme résolu plus tôt (en fait je l’ai fait, mais sur ce post sur la bêta… bref, big fail). Ça m’embête un peu que les votes aient actuellement changé.