Comment faire une belle pagination avec des listes en CSS

Il peut être tentant de simplement utiliser des tables pour afficher une pagination en bas de page, mais cette méthode va à l’encontre de l’esprit d’un site HTML et CSS, qui sépare la présentation du contenu, parce qu’une pagination n’est pas à proprement parlé du contenu tabulaire et l’emploi de la balise table ne serait donc pas sémantiquement correcte. Qu’elle serait une balise alternative acceptable? Les listes… puisque ces numéros de page sont bel et bien une énumération. Par contre, celles-ci sont plus compliquées à modifier pour une mise en page horizontale. Donc voyons voir ce que l’on peut faire avec un peu de magie CSS.

Supposons que nous avons un article de trois pages et qu’on affiche les liens en bas de celui-ci pour naviguer parmi les parties divisées. Notre pagination formatée avec une liste, qui possède l’identification pagination, ressemblerait à ceci dans la page 1:

« précédent
1
2
3
suivant »

Comme nous sommes à la page 1 dans notre exemple, le lien « précédent » est inactif et le lien « suivant » pointe vers la page 2. Bon à première vue, il nous faut régler le problème du sens vertical de la liste. Comment faire une liste horizontale? Nous allons faire « flotter » les éléments li vers la gauche avec les CSS, comme suit:

ul#pagination li {
list-style: none;
float: left;
width: 20px;
}

ul#pagination li.navigation {
width: 100px;
}

La partie list-style: none sert à cacher les points de liste, la partie float: left enligne les éléments de la liste de façon horizontale et nous précisons une largeur de 20px (au choix) pour chacun d’eux. Cette largeur risque d’être serrée pour les points « précédent » et « suivant », on leur donne donc une valeur de 100px avec la classe spéciale navigation.

Résulat:

C’est un bon point de départ, mais tout ça n’est pas très joli, nous allons donc peaufiner un peu la présentation pour un graphisme un peu plus moderne, comme on voit avec Youtube, Facebook et Digg, en changeant l’apparence des liens pour le mode block, ce qui nous donne des rectangles cliquables. Nous allons aussi changer l’apparence du lien 1 pour informer le visiteur de la page où il se trouve, et créer une classe pour les boutons « précédent » et « suivant » en mode inactif dans le cas où le visiteur se trouve à la première ou la dernière page.

« précédent
1
2
3
suivant »

ul#pagination li {
list-style: none;
float: left;
padding: 0px 5px 0px 5px;
width: 20px;
margin: 0px 0px 4px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

ul#pagination li.navigation {
width: 100px;
}

ul#pagination li a {
display: block;
padding: 4px 6px 4px 6px;
font-size: 12px;
text-align: center;
}

ul#pagination li a, ul#pagination li a:visited, ul#pagination li a.actuel, ul#pagination li a:hover {
background-color: #0072bc;
color: #FFFFFF;
text-decoration: none;
}


ul#pagination li a.actuel, ul#pagination li a:hover {
background-color: #e7e7e7;
color: #000000;
}

ul#pagination li.navigation a, ul#pagination li.navigation a:visited, ul#pagination li.navigation a:hover {
background-color: #FFFFFF;
color: #000000;
}

ul#pagination li.navigation a:hover {
text-decoration: underline;

}

ul#pagination li.navigation a.inactif, ul#pagination li.navigation a.inactif:visited, ul#pagination li.navigation a.inactif:hover {
text-decoration: none;
color: #999999;
}

Résulat:

Ce qui résulte en une belle petite pagination tout à fait à la mode en bas de page, le tout avec un code HTML minuscule, correct du point de vue sémantique, et une présentation CSS facile à modifier de façon globale.