Centrage du menu barre

 

 

Suite à de nombreuses questions sur le centrage du menu de la barre, après avoir employé diverses solutions, je me suis fixé sur une que je vais tenté de vous expliquer ci-dessous.

 

 

La barre est composée d'un bloc principal nommé "Barre" qui contient la liste qui compose le menu. La liste est contenue dans un bloc "UL", c'est sur ce bloc que je vais orienter le centrage, car ce bloc est dans le bloc "Barre", en calculant sa largeur il sera possible de le centrer en mettant des marges extérieures auto.

 

Pour calculer la largeur du bloc "UL", il faut prendre en compte :

  1. la largeur des éléments c'est à dire la largeur des liens.
  2. la marge extérieure gauche des liens
  3. la largeur de la bordure encadrant les liens
  4. le nombre d'éléments de la liste

 

Pour vous aider à calculer, le formulaire suivant devrait vous facilité la tâche. Les rubriques contiennent par défaut les valeurs pour afficher la barre que vous voyez  en haut de cet article.
Vous pouvez donc essayer de mettre les valeurs pour votre barre et lancer le calcul.

Je vous conseille de mettre la largeur de la barre à 100%, pour faciliter le centrage, sinon il vous faudra mettre à la partie "Barre" des marges extérieures gauche et droite en auto

 

 

 

 


 

 





 

 

 

 

Après avoir renseigné toutes les rubriques, cliquez sur le bouton "Afficher..."

 


Bases calcul :

 

(largeur élément+marge+(bordure)*2 gauche et droite)*4modules+1marge

en rouge dans la largeur il ya 2 bordures et je rajoute une marge pour compenser la première marge de gauche.


Largeur UL:


 

 

 Si vous voulez utiliser cette procédure, une fois le calcul effectué,récupérez la valeur de la largeur du bloc UL, puis dans votre DizPerso ouvrez l'onglet "Modification directe du CSS", pour ajouter à la règle #barre ul, les 3 lignes suivantes, selon mon exemple:

 

width : 433px;
margin-left : auto;
margin-right : auto;

 


N'oubliez pas de mettre la valeur 100% à la largeur de la barre.

 

Même si tous les cas de figures ne peuvent être réglé avec cette astuce, je pense qu'il vous permettra de mieux réaliser vos centrages de barre.



08/12/2010
38 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso