Les exemples de cette page présentent des menus horizontaux, sans puces.
Liste 1 - Cette liste est la plus basique. On a juste supprimé
le retour à la ligne entre chaque item de la liste (ce qui donne normalement
une liste verticale) en forçant un affichage en-ligne grace à
une fonction display:inline. On a aussi rajouté un encadrement.
Cette liste marche dans tous les navigateurs, mais l'encadrement ne s'affiche
pas dans Internet Explorer 5.0, à cause d'un bug.
Liste 2 - Idem liste 1, mais avec 2 modifications : on a rajouté une marge intérieur (padding) à gauche et à droite de chaque item, pour aérer la présentation, et on a résolu le bug de IE5.0 pour que les encadrements s'affichent. Reste un bug dans IE5.0 : la marge intérieur ne s'affiche pas.
Liste 3 - Idem liste 2, mais on a rajouté une fonction permettant de centrer la liste dans la page, pour une meilleure esthétique.
Liste 4 - Idem liste 2, mais on force la liste à s'étaler
sur toute la page (ou de la boite, si la liste est dans une boite, comme ici),
ce qui permet d'avoir un rendu presque simillaire dans toutes les résolutions
d'écran.
Le problème, c'est que IE 5.0 et supérieurs acceptent de dimensionner
les boites en-lignes (ici, les <li> mis en display:inline),
mais pas les autres navigateurs (c'est normalement exclu de la norme officielle
CSS).
Pour dimensionner ces boites, il faut normalement passer les boites en-ligne
en boites table (display-table et display-cell), pas ou mal
interprétées par IE5.0 et supérieurs.
La solution est donc un nouveau hack : on utilise à la fois le dimensionnement
des boites en-lignes propre à IE, et le dimensionnement des boites
table prévu par les autres navigateurs. Malheureusement, ce hack ne
marche dans IE6 qu'avec une DTD
transitionnal, pas avec une DTD stricte. Bizarrement, tout va bien dans IE5.x,
même avec une DTD stricte.
Liste 5 - Idem liste 4, mais passe avec une DTD stricte. Attention, dans le code ci-dessous, le code CSS est complet : il ne faut pas y rajouter le code commun aux exemples 1 à 4.
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
/* DEBUT DU CODE COMMUN AUX LISTES 1 A 4 */
ul.liste, li, a {padding:0px ; margin:0px} /*met à 0 toutes les
marges, intérieures et extérieures */
ul.liste {margin-bottom:50px} /* insère un espace de 50 px en dessous
de chaque liste */
ul.liste li { /* style chaque cellule de la liste */
display:inline ; /* passe la liste de l'affichage vertical à l'affichage
horizontal */
border:1px solid red} /* crée un encadrement rouge */
.liste a { /* style des liens sans survol */
text-decoration:none ; color:black} /* pas de soulignement, police noire
*/
.liste a:hover { /* style des liens avec survol */
color:white ; background-color:black} /* police blanche sur fond noir */
/* FIN DU CODE COMMUN AUX LISTES 1 A 4 */
.liste2 a {padding-left:30px ; padding-right:30px} /* marges gauches et
droites sur les liens */
ul.liste2 li {width:1px} /* hack pour forcer IE5.0 a afficher les bordures}
*/
body>.liste2 li {width:auto} /* annule le hack IE 5.0 pour les autres
navigateurs que IE */
.centrage {text-align:center ; margin:auto} /* pour centrer la liste 3
*/
/* DEBUT LISTE 4 */
ul.liste4 {display:table ; /* la liste <ul> est transformée
en tableau CSS */
border-collapse:collapse ; /* les bordures sont fusionnées */
width:99%} /* la liste <ul> prend 99% de la page */
ul.liste4 li {width:24.8% ; /* largeur des <li> - suffit à
IE */
text-align:center} /* le texte de chaque <li> est centré */
.liste4 a {display:block} /* pour que l'effet de survol prenne toute la
largeur du <li> */
/* cacher à IE */
ul.liste4>li {display:table-cell} /* indispensable pour que les autres
navigateurs que IE accepte la largeur de <li> */
/* FIN LISTE 4 */
/* DEBUT LISTE 5 - CODE INTEGRAL */
ul.liste5 { /* style de la liste <ul> */
margin:10px 0 10px 0 ; /* marges */
height:1em ; /* hauteur de la liste - remplace le spacer normalement indispensable
pour les float */
display:table ; /* fait passer la liste en mode table */
border-collapse:collapse ; /* fusionne les bordures de la table */
width:99%} /* largeur de la liste <ul> */
ul.liste5 li { /* style des <li> */
float:left ; /* le float:left remplace le display:inline. permet le passage
en DTD stricte */
border:1px solid red ; /* bordure rouge autour de chaque <li> */
width:24.7% ; /* largeur de chaque <li> */
text-align:center} /* centre le texte dans chaque <li> */
/* cacher à IE */
ul.liste5>li {display:table-cell} /* indispensable pour que les autres
navigateurs que IE accepte la largeur de <li> */
.liste5 a { /* style des liens sans survol */
text-decoration:none ; /* pas de soulignement */
color:black ; /* police noire */
display:block} /* l'effet de hover prendra toute la largeur du <li>
*/
.liste5 a:hover {/* style des liens avec survol */
color:white ; background-color:black} /* police blanche sur fond noir */
/* FIN LISTE 5 - CODE INTEGRAL */
</style>
</head>
<body>
<ul class="liste"> <!-- liste 1 -->
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
<ul class="liste liste2"> <!-- liste 2 -->
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
<ul class="liste liste2 centrage"> <!-- liste 3 -->
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
<ul class="liste liste4"> <!-- liste 4 -->
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
<ul class="liste5"> <!-- liste 5 -->
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</body>
</html>
COMMENTAIRES
On voit que les listes en lignes ne sont pas fondamentalement plus compliquées que les listes verticales. Elles passent très bien dans les navigateurs Gecko (Firefox, Mozilla,...) et dans Opéra, mais IE a plusieurs bugs génants, qui exigent, comme d'habitudes, des bidouilles (des hacks) sur le code.
Toutes les listes ci-dessus sont utilisables. Il faut juste choisir celle qui colle le mieux à ses besoins.
On utilise ici à chaque fois une combinaison de 2 ou 3 classes (pour alléger le code) : une classe de base, et une classe spécifique à chaque liste. Pour en savoir plus sur les combinaisons de classes. Pensez bien que dans votre code définitif, vous devez "coller" le code CSS de la liste qui vous convient avec le code CSS général de la classe de base.
Enfin, ces exemples n'ont pas pour vocation a donner des exemples d'habillage, mais visent surtout à faire comprendre le fonctionnement des différentes listes horizontales. Pour les habillages, voyez la partie boutons ou listamatic.