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:

1
2
3
4
5
6
7
<ul id="pagination">
<li class="navigation">« précédent</li>
<li>1</li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li class="navigation"><a href="page2.html">suivant »</a></li>
</ul>

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:

1
2
3
4
5
6
7
8
9
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:

Pagination Liste CSS 1

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.

1
2
3
4
5
6
7
<ul id="pagination">
<li class="navigation"><a class="inactif">« précédent</a></li>
<li><a class="actuel">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li class="navigation"><a href="page3.html">suivant »</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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:

Pagination Liste CSS 2

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.

Partager cet article:

  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • LinkedIn

Catégories: Graphisme, Programmation web | 3 commentaires »
Les tags de cet article:

Note: Merci pour vos commentaires, j'apprécie ceux qui partagent leurs avis et leurs expériences de webmestre, ou s'il y a lieu, indiquent une erreur dans mes tutoriels, mais je ne peux évidemment pas faire de support technique pour votre site, alors veuillez éviter d'en faire la demande dans cette section.

3 commentaires pour “Comment faire une belle pagination avec des listes en CSS”

  1. Razmot dit: 31 juillet 2009 at 16:31

    Salut,
    merci pour ce code !
    Si je veux faire la même chose mais, avec 34 pages
    De cette facon
    1-2-3-4-5-6-7-8
    9-10-11-12-13-14
    …..
    Comment on fait s.v.p !
    Peut-on appeler tous ça avec un javascript.
    Question de ne pas updater chacune des pages à chaque ajout de nouvelles pages.

  2. olga dit: 17 avril 2010 at 21:16

    bonjour, et merci pour ce code!
    Comment fait-on pour le mettre en haut et en bas de page? merci bcp

  3. gendrin dit: 6 août 2010 at 21:06

    merci beaucoup :-p

Laisser un commentaire