Alignement horizontal du menu principal

Le “responsive”, vous savez…

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

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

Menu principal actuel

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 :

Menu principal centré
Menu principal aligné à gauche

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

Édité par motet-a

+10 -7

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

Menu principal centré motet-a
Menu principal actuel motet-a
Menu principal aligné à gauche motet-a
2560 × 1440 Chrome vhf
1680 × 1050 Chrome vhf

Édité par victor

Le saviez-vous ? Chaque -1 que vous mettez vous fait gagner un point de QI.

+0 -0
Auteur du sujet

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

A-312

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

victor

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.

Édité par motet-a

+0 -1

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.

AVION // 🐺 // 💡 // L’hiver vient

+0 -0
Auteur du sujet

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.

A-312

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.

Édité par motet-a

+0 -0

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.

motet-a

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.

AVION // 🐺 // 💡 // L’hiver vient

+0 -0

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) :

AVION // 🐺 // 💡 // L’hiver vient

+0 -0
Auteur du sujet

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

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

image

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

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte