{"id":1665,"date":"2012-01-08T23:11:08","date_gmt":"2012-01-08T22:11:08","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1665"},"modified":"2018-07-15T21:48:03","modified_gmt":"2018-07-15T19:48:03","slug":"creer-menu-horizontal-centre-css-sans-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/creer-menu-horizontal-centre-css-sans-javascript","title":{"rendered":"Cr\u00e9er un menu horizontal centr\u00e9 en CSS (sans JavaScript)"},"content":{"rendered":"

C’est une chose qui peut para\u00eetre tr\u00e8s simple \u00e0 faire, mais sur laquelle beaucoup de personnes se sont cass\u00e9s les dents.
\nAujourd’hui encore je trouve des solutions en JavaScript qui permettent d’attribuer une marge \u00e0 gauche de l’\u00e9l\u00e9ment ul<\/code> pour centrer les li<\/code> qu’il contient.
\nVoyons en quelques lignes de CSS<\/abbr> comment faire fonctionner un centrage de liens dans un menu horizontal sur tous les navigateurs.<\/p>\n

Solution avec li<\/code> en inline<\/code><\/h2>\n

Vous savez sous doute que l’affichage des \u00e9l\u00e9ments de liste se fait par d\u00e9faut en display: list-item;<\/code>, qui procure \u00e0 la liste ce comportement particulier, notamment l’attribution de puces de liste.
\nGr\u00e2ce \u00e0 CSS, nous allons red\u00e9finir cette propri\u00e9t\u00e9 par d\u00e9faut en passant sa valeur \u00e0 inline<\/code>.<\/p>\n

Consid\u00e9rons le code HTML suivant :<\/p>\n

<ul id=\"nav\"><!--\r\n\t--><li><a href=\"#\">Accueil<\/a><\/li><!--\r\n\t--><li><a href=\"#\">Services<\/a><\/li><!--\r\n\t--><li><a href=\"#\">\u00c0 propos<\/a><\/li><!--\r\n\t--><li><a href=\"#\">Contact<\/a><\/li>\r\n<\/ul><\/code><\/pre>\n
Les commentaires HTML entre chaque \u00e9l\u00e9ment de liste permettent de supprimer l’espace blanc (white-space<\/code>) ind\u00e9sirable, visible sur certaines mises en forme.<\/p>\n
Il nous faut maintenant simplement annuler les styles par d\u00e9faut de la liste pour obtenir des liens align\u00e9s sans puce de liste.<\/p>\n
#nav {\r\n\tpadding: 0; margin: 0;\r\n}\r\n#nav li {\r\n\tdisplay: inline;\r\n\tlist-style: none; \/* n\u00e9cessaire pour IE7 *\/\r\n}<\/code><\/pre>\n
Inline<\/code> suffit pour la plupart des navigateurs, mais IE7 a tout de m\u00eame besoin que la valeur list-style<\/code> soit \u00e0 none<\/code> pour que la suppression des puces soit effective.<\/p>\n
Avec cela, nos liens sont coll\u00e9s, et surtout le texte est align\u00e9 \u00e0 gauche.
\nIl nous faut donc compl\u00e9ter notre code pour corriger l’alignement et l’espacement des liens.<\/p>\n
#nav {\r\n\tpadding: 0; margin: 0;\r\n\ttext-align: center; \/* centrer le texte *\/\r\n}\r\n#nav li {\r\n\tdisplay: inline;\r\n\tlist-style: none;\r\n}\r\n#nav a {\r\n\tdisplay:inline-block;\r\n\tmargin: 0 30px;\r\n}<\/code><\/pre>\n
La ligne 2 nous permet d’annuler les marges par d\u00e9faut de la liste. La Ligne suivante (3) permet de centrer nos \u00e9l\u00e9ments de liste maintenant tous align\u00e9s. Les derni\u00e8res d\u00e9clarations (lignes 9 \u00e0 12) ajoutent de l’espace entre les liens.<\/p>\n
\"\"<\/p>\n
D\u00e9monstration simple<\/a> D\u00e9monstration styl\u00e9e<\/a><\/p>\n
Solution avec li<\/code> en inline-block<\/code><\/h2>\n
Pourquoi proposer cette deuxi\u00e8me solution ?<\/p>\n
    \n
  1. inline-block<\/code> est trop peu connu<\/a><\/li>\n
  2. inline-block permettrait d’ajouter des effets suppl\u00e9mentaires autour des liens<\/li>\n
  3. \u00e7a ne change pas grand chose \u00e0 votre code<\/li>\n<\/ol>\n
    Le code HTML ne change pas, et le code CSS non plus, hormis la ligne 6 du code pr\u00e9c\u00e9dent, o\u00f9 il vous suffit de remplacer inline<\/code> par inline-block<\/code>.
    \nLe seul souci que l’on va avoir c’est un probl\u00e8me de compatibilit\u00e9 avec IE. Pour cela, je vous renvoie sur l’article du blog, si vous ne l’avez pas d\u00e9j\u00e0 lu :
    \n    Display : inline-block, une valeur trop peu utilis\u00e9e<\/a><\/p>\n
    Le comportement est quasiment identique qu’avec la valeur inline<\/code>, la diff\u00e9rence \u00e9tant la possibilit\u00e9 de redimensionner l’\u00e9l\u00e9ment et de lui appliquer des styles applicables \u00e0 des \u00e9l\u00e9ments de type block<\/code>.<\/p>\n
    Si vous avez des questions l’espace de commentaires est l\u00e0 pour vous \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
    C’est une chose qui peut para\u00eetre tr\u00e8s simple \u00e0 faire, mais sur laquelle beaucoup de personnes se sont cass\u00e9s les dents. Aujourd’hui encore je trouve des solutions en JavaScript qui permettent d’attribuer une marge \u00e0 gauche de l’\u00e9l\u00e9ment ul pour centrer les li qu’il contient.<\/p>\n","protected":false},"author":4,"featured_media":1788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,9],"tags":[407,408,288,406,354,157],"coauthors":[597],"class_list":["post-1665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","tag-centrage","tag-centre","tag-css2-1","tag-horizontal","tag-liste","tag-menu"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=1665"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1665\/revisions"}],"predecessor-version":[{"id":6560,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1665\/revisions\/6560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/1788"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=1665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=1665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=1665"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=1665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}