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 | 1792 vues

Partager


Commentaires


Lafaucheuse
site/blog
le 08-12-2010 à 22:29:34
Bonsoir Papyclic,

je viens de lire ton article. C'est vrai que le centrage de la barre est ce qui est le plus difficile à intégerer lorsqu'on commence à entrer dans le css. Avec cet article tout est non seulement clair , net, et précis, mais l'outil de calcul que tu y a ajouté est "UNE PURE MERVEILLE" qui va en soulager beaucoup!

Merci encore et toujours de nous expliquer patiemment et de nous faire partager tes astuces!

Bises :))
simon
le 08-12-2010 à 23:25:20
Bonsoir
Et dire que je m'amuse à mettre des chiffres alors que c'est si simple.
On est tous perdus entre les margin et les padding sans compter les left et right , les a ul et li, bref de quoi s'emmêler mille fois.

Grand merci papyclic
SOCOUNTRY
site/blog
le 29-03-2011 à 20:58:10
Bonsoir,

Tout d abord merci pr tous tes posts / aide excellent :)

Pour ma part je rencontre un souci, je souhaite remettre ma Barre Aligner et non surperposer les unes sur les autres :)
j y arrive plus et Le Css Dizperso avec tes articles (peur de faire des mauvaise manip) je sais plus ou me rendre lol :)

Merci de ton aide et Bonne soirée
PapyClic
le 29-03-2011 à 22:00:37
Bonsoir
Merci pour ta visite, pour ton problème de barre, il faut augmenter la largeur de la liste :
#barre ul dans le CSS
Partie Barre > liste dans la configuration assistée
width : 500px;
... pour contenir les 4 liens de 100px + marge 20px
selon le calcul dans mon article plus haut

Bonne continuation
Maria-Dolores
site/blog
le 15-06-2011 à 07:09:49
bonjour Papylic,



Je ne comprends rien c'est vraiment pas pour moi, malgré que j'ai tenté, je n'ai fait qu'une vraie catastrophe je n'ai plus rien de correct sur mon blog! bien je ne pense pas que c'est fait pour moi je ne suis vraiment pas à l'aise avec tous ces codes!
PapyClic
le 15-06-2011 à 08:55:28
Bonjour Maria Dolores

Il faut bien sûr connaître un peu le langage CSS, si tu as besoin d'aide, mets un message sur le forum d'aide de B4E, section CSS & DizPerso, explique exactement ce que tu veux et je suis certain que tu auras une réponse de moi ou de plusieurs blogueurs en sont capables.

Ce n'est pas facile d'aider en utilisant les commentaires.

Bonne journée
Monyka-Sensible
site/blog
le 20-06-2011 à 20:49:25
bonsoir, j'ai essayé, mais j'ai mes titres toujours sur le coté !
et c'est surtout la distance entre chaque module qui bat de l'aile ,
mes titres sont collés,
et celui du forum , j'aimerai l'enlever SVP , merci
bonne soirée, Monyka
débo
site/blog
le 07-08-2011 à 16:30:18
Coucou

j'ai rien compris

dans mon CSS j'ai mis ça :
#barre ul,
width : 326pxpx;
margin-left : auto;
margin-right : auto;

et ça à pas du tout centré ma barre accueil et articles
PapyClic
le 07-08-2011 à 16:42:52
Bonjour débo
Tu as mis 2 fois px !!!
D'autre part, tu as 2 modules donc la largeur 326 n'est pas bonne, refais le calcul. Puis tu a oublié de mettre 100% à la largeur de la barre.
Trois erreurs!
Après rectification la barre devrait être centrée.
Bonne continuation
socountry
site/blog
le 07-09-2011 à 22:50:01
Bonsoir,

Je sais pas si je vais poster correctement, je m en excsue d avance si c etait pas ici :)
j'aimerai savoir comment remettre ma barre aligner plutot que ces titres les uns sur les autres, et mon hic je trouve pas le sujet le conçernant :(
Merci d 'avance de votre aide !
et merci pr ts ces sujets aides...on s 'éclate...mm quand on est pas une pro merciiiii

Bne soiree
PapyClic
le 08-09-2011 à 00:18:17
Bonsoir socountry
C'est la largeur du bloc liste (ul), tu as mis 100px, il faut mettre 404px pour que les 3 liens s'alignent horizontalement.

Refais le calcul avec l'outil de centrage.

Bonne continuation
SOCOUNTRY
site/blog
le 11-09-2011 à 11:31:01
Bnjr,

Merci de ton aide PapyClic, j essaie ça, je t avouerai que g bcp de mal avec l outil de centrage mais avec de la bonne volonté...on y'arrive

Merci bcp, et bn dimanche.

Bye :)
SOCOUNTRY
site/blog
le 11-09-2011 à 11:36:23
Re :) en te remerçiant bcp , me sbarres st revenus comme je le souhaite yesssssss :);)

Bne jrnee

COUNTRYALEMENT.
PapyClic
le 11-09-2011 à 12:19:48
Bonjour Socountry
La barre n'est pas exactement centrée.
Il faut mettre la largeur de la partie 'Barre avec une valeur 100%
puis la partie Barre > liste avec une large de 404px.

C'est le résultat de l'outil de calcul du centrage.

Bonne continuation
Socountry
site/blog
le 22-09-2011 à 20:44:11
Bonsoir,

Merci Papyclic vraiment trés pro, alors j'ai fait comme tu as exposer au dessus :) est ce bien ça :) merci encore de ton aide c'est génial !!!

Bne soirée

Countryalment
Socountry
site/blog
le 22-09-2011 à 21:05:28
re bnsr, dsl je ne trouve pas la rep a ma question, pour mettre de la musique en continu et sr tte les pages ( sans mettre un lecteur sr chaque page) sr mon blog (dsl de poster ici j ss paumer là :) )est ce qu on peut le faire tt d abord ?

merci bcp de votre aide

Bne soiree
PapyClic
le 22-09-2011 à 21:20:31
Bonsoir Socountry
Pour la musique, il faut en gestion aller >>> VOTRE BLOG
>>> Musique d'accueil
Bonne Continuation
Lyrabelle
site/blog
le 26-09-2011 à 20:28:04
Coucou Papyclic,
J'ai essayé ta règle de calcul. J'ai mis 100 % -3 - 265 - 10 - 0 et j'ai obtenu 835 px que j'ai reporté dans #barre ul, et mis 100 % à la valeur de ma barre, mais... cela n'a rien centré du tout...
Ma barre ferait-elle partie des exceptions non régies par cette astuce? ou bien me suis-je trompée quelque part ?
Bonne soirée
Lyrabelle
site/blog
le 26-09-2011 à 20:35:51
re-coucou

c'est bon, je crois. Je n'ai pas mis 100 % à ma barre, mais 1000 px, et ça l'a centré. Pardon de t'avoir dérangé
PapyClic
le 26-09-2011 à 21:43:39
Bonsoir Lyrabelle

Donc tu as réussi, bravo!!!
Bonne soirée
joce
site/blog
le 20-12-2011 à 23:32:20
Bonjour, une fois le calcul fait, la barre à 100 %, je la change dans le CSS ou dans la configuration assistée ?? désolée, je débute en informatique, rien ne s'aligne ou dois-je mettre 100% après ul ?

Merci par avance
Je reviens le 30/
Joyeux Noël
Joce
PapyClic
site/blog
21-12-2011 à 01:06:23
Bonsoir Joce
Ton blog n'est pas en DizPerso, c'est un modèle graphique donc les sélecteurs en CSS ne sont pas les mêmes et il n'y a pas de configuration assistée.
Une grosse différence le menu du haut n'a pas l'identifiant "barre" mais "menu". Je pense donc qu'il faut mieux laissé le menu comme il est. A ton retour fait une visite sur le forum d'aide, inscris-toi, pose la question en signalant que tu as choisi un modèle graphique.

Joyeux Noël
Joce
site/blog
le 21-12-2011 à 01:25:03
Merci pour ta réponse mais j'avais commencé avec un modèle graphique pour ensuite le faire en dizz, j'ai déjà changé quelques paramètres en CSS pour le fond et la neige qui tombe.. je ne comprends pas
merci quand mm

A plus tard.
Joce
Elegantes
site/blog
le 11-05-2012 à 15:40:04
Bonjour,
Depuis hier j'essaye de mettre au milieu ma barre, qui est pour l'instant à gauche. Je ne comprends pas ou est mon erreur. Si tu veux bien jeter un coup d’œil à se que j'ai fait s'il te plait.

#barre
{
width : 100%;
height : 30px;
margin-top : 10px;
}
#barre ul
width : 418px;
margin-left : auto;
margin-right : auto;
PapyClic
site/blog
11-05-2012 à 15:49:11
Bonjour Elegantes,
Il y avait une erreur dans la règle #barre ul
Maintenant c'est bon.
Bonne continuation
Elegantes
site/blog
le 11-05-2012 à 15:51:18
Quel rapidité ! Merci beaucoup Papyclip
Elegantes
site/blog
le 12-05-2012 à 19:16:42
Bonjour Papy clip
C'est encore moi =)

Après des conseils sur le forum "petit soucis" J'ai voulus modifiée la taille de la bordure de éléments de la liste dans menus qui était à la base de 1 px en 2 px.

Et là ça ma tout mis en dessus dessous, j'ai remis la valeur initiale, et pourtant c'est toujours le bazar. On m'a orienté vers ton blog,me disant que ma barre avait été décentré Je ne comprends vraiment pas car je n'ai vraiment toucher à rien d'autre dans le diz perso et css

Peux tu me dire ce qui s'est passé? Et comment y remédier s'il te plait
PapyClic
site/blog
12-05-2012 à 20:57:28
Bonsoir Elegantes,
Il y avait une erreur dans ton CSS.
C'est bon maintenant.
Bonne soirée
elegantes
site/blog
le 12-05-2012 à 21:02:53
Merci beaucoup pour ton aide
bonne soirée
Doumi-atelier-creati...
site/blog
le 15-05-2012 à 00:53:09
Bonjour Papyclic,
Merci des renseignements j'ai réussi à centre les éléments de ma barre et je crois avoir compris.
Reste un problème, j'aimerais que les 4 boutons accueil-article-photo-forum soit proches l'un de l'autre et je n'arrive pas à réduire l'espace entre chaque boutons.
Peux-tu me donner une explication ou un lien vers une explication.
Merci d'avance.
Doumi
PapyClic
site/blog
15-05-2012 à 01:12:02
Bonsoir Doumi,
Il y avait trop de chose à revoir, j'ai réglé ta barre.
Bonne continuation
Doumi-atelier-creati...
site/blog
le 15-05-2012 à 13:58:59
Bonjour Papyclic,
Merci beaucoup.
Doumi
Poster un commentaire
Merci de recopier le nombre de gauche dans la case ci-dessous (Pourquoi?)

Liens

Voir les articles de la catégorie " Barre de Menu "
Imprimer cet article

Rechercher sur Diztest ? :

Recommander ce blog | Contacter l'auteur | Signaler un contenu | S'abonner au blog Flux RSS du blog | Espace de gestion | Annuaire des blogs