Tutoriels ⇒ HTML5 CSS3 facebook twitter youtube

Menu en HTML5 ⇒ & centré un menu horizontal en CSS (sans JavaScript)



Voyons en quelques lignes de CSS comment faire fonctionner un centrage de liens dans un menu horizontal sur tous les navigateurs.

Solution avec li en inline

Vous savez sous doute que l’affichage des éléments de liste se fait par défaut en display: list-item;, qui procure à la liste ce comportement particulier, notamment l’attribution de puces de liste.
Grâce à CSS, nous allons redéfinir cette propriété par défaut en passant sa valeur à inline.

Le code HTML suivant :

<div class="exemple" id="ex2">  
<ul class="nav">
<li><a href="#">Accueil</a></li><!--
<li><a href="#">Services</a></li><!--
<li><a href="#">À propos</a></li><!--
 <li><a href="#">Contact</a></li>
</ul>
</div>

 

Les commentaires HTML entre chaque élément de liste permettent de supprimer l’espace blanc (white-space) indésirable, visible sur certaines mises en forme.

Il nous faut maintenant simplement annuler les styles par défaut de la liste pour obtenir des liens alignés sans puce de liste.

#nav {
	padding: 0; margin: 0;
}
#nav li {
	display: inline;
	list-style: none; /* nécessaire pour IE7 */
}

Inline suffit pour la plupart des navigateurs, mais IE7 a tout de même besoin que la valeur list-style soit à none pour que la suppression des puces soit effective.

Avec cela, nos liens sont collés, et surtout le texte est aligné à gauche.
Il nous faut donc compléter notre code pour corriger l’alignement et l’espacement des liens.

#nav {
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
}
#nav li {
	display: inline;
	list-style: none;
}
#nav a {
	display:inline-block;
	margin: 0 30px;
}

 

Style:

    h1 {
        text-align: center;
    }
    .exemple {
        height: 1600px;
    }
    #ex2 {
        padding-top: 5em;
    }
      /* premier exemple */
    .nav {
        padding: 0;
        margin: 2.5em 0;
        text-align:center;
    }
    .nav li {
        display: inline;
        list-style: none; /* nécessaire pour IE7 */
    }
    .nav a {
        display:inline-block;
        margin: 0 30px;
    }
    #ex2 .nav {
        border: 1px solid #333;
        border-top-color: #707070;
        background-color: #5E5E5E;
        background: -moz-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
        background: -webkit-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
        background: -ms-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
        background: -o-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
        background: linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
        text-align: center;
        height: 36px;
        -webkit-box-shadow: 0 1px 3px #999;
        -moz-box-shadow: 0 1px 3px #999;
        box-shadow: 0 1px 3px #999;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    #ex2 .nav a {
        height: 36px;
        margin:0;
        padding: 0 35px;
        line-height: 36px;
        border-left: 1px solid #555;
        border-right: 1px solid #888;
        text-decoration: none;
        color: white;
        text-shadow: -1px -1px 0 #444;
        font-family: Helvetica, Arial, Verdana, sans-serif;
        font-size: 1em;
    }
    #ex2 .nav :first-child a {
        border-left: 0;
    }
    #ex2 .nav :last-child a {
        border-right: 0;
    }
    #ex2 .nav a:hover,
    #ex2 .nav a:focus {
        background-color: #3E3E3E;
        background: -moz-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
        background: -webkit-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
        background: -ms-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
        background: -o-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
        background: linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
        text-shadow: -1px -1px 0 #000;
    }
    .ad {
        position: fixed;
        padding: 10px;
        width: 125px; height: 260px;
        bottom: 15px; right: 15px;
    }       

 

La ligne 2 nous permet d’annuler les marges par défaut de la liste. La Ligne suivante (3) permet de centrer nos éléments de liste maintenant tous alignés. Les dernières déclarations (lignes 9 à 12) ajoutent de l’espace entre les liens.

Démonstration stylée

 


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces