Créer de superbes paginations à l'aide de (X)HTML et CSS

Date de publication : 29/04/2008 , Date de mise à jour : 03/06/2008

Cet article vous présentera différentes techniques CSS pour réaliser des paginations ayant du style.

Version PDF (Miroir) Version hors-ligne (Miroir)

Introduction
Structure d'une pagination
Pagination Flickr-like
Pagination Digg-like
Pagination Standard
Remerciements

Introduction

Ce tutoriel vous explique comment dessiner une pagination pour le résultat d'une recherche ou pour diviser une longue liste sur une de vos pages de votre site. C'est une question qui revient souvent dans nos courriels. Alors, j'ai décidé de vous expliquer comment avec quelques lignes de (X)HTML et de CSS afficher une superbe pagination.

L'article qui suit se veut une inspiration et une traduction pour nos lecteurs francophones de l'article publié par : Antonio Lupetti

Nous allons voir 3 différentes paginations soit une pagination à la Digg-like, à la Flickr-like et une plus commune prête à être utilisée dans vos pages.

Structure d'une pagination

L'image suivante représente un exemple de la structure d'une pagination typique :

En général, vous pouvez identifier les éléments suivants :

Bouton Précédent (désactivé) ;
Page active ;
Sélecteur ;
Bouton Suivant (activé).

Vous pouvez construire facilement cette structure à l'aide d'une liste (X)HTML <ul> et de quelques <li> pour chaque élément de la pagination. Voici donc les explications.

Pagination Flickr-like

Une pagination de type Flickr-like devrait ressembler à ce qui suit :

Le code (X)HTML est très simple. Vous pouvez réutiliser cette structure dans tous les types de paginations. Il ne suffira que de modifier l'ID de la liste afin de modifier l'affichage de celle-ci grâce au CSS.

Code (X)HTML de la liste


<ul id="pagination-flickr">
    <li class="previous-off">« Précédent</li>
    <li class="active">1</li>
    <li><a href="/?page=2">2</a></li>
    <li><a href="/?page=3">3</a></li>
    <li><a href="/?page=4">4</a></li>
    <li><a href="/?page=5">5</a></li>
    <li><a href="/?page=6">6</a></li>
    <li><a href="/?page=7">7</a></li>
    <li class="next"><a href="/?page=2">Suivant »</a></li>
</ul>

Ne reste plus qu'à définir les éléments du CSS (ul, li, a).

Code CSS de la liste


ul 
{ 
    border:0; 
    margin:0; 
    padding:0; 
}

#pagination-flickr li
{
    border:0; 
    margin:0; 
    padding:0;
    font-size:11px;
    list-style:none;
}

#pagination-flickr a
{
    border:solid 1px #DDDDDD;
    margin-right:2px;
}

#pagination-flickr .previous-off, #pagination-flickr .next-off 
{
    color:#666666;
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
}

#pagination-flickr .next a, #pagination-flickr .previous a 
{
    font-weight:bold;
    border:solid 1px #FFFFFF;
}

#pagination-flickr .active
{
    color:#ff0084;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
}

#pagination-flickr a:link, #pagination-flickr a:visited 
{
    color:#0063e3;
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
}

#pagination-flickr a:hover
{
    border:solid 1px #666666;
}

Pagination Digg-like

Maintenant, voici ce à quoi une pagination à la Digg-like devrait ressembler :

Copier et coller la structure vue un peu plus haut, il suffit de changer l'ID « pagination-digg » à la place de « pagination-flickr » :

Code (X)HTML de la liste


<ul id="pagination-digg">
    <li class="previous-off">« Précédent</li>
    <li class="active">1</li>
    <li><a href="/?page=2">2</a></li>
    <li><a href="/?page=3">3</a></li>
    <li><a href="/?page=4">4</a></li>
    <li><a href="/?page=5">5</a></li>
    <li><a href="/?page=6">6</a></li>
    <li><a href="/?page=7">7</a></li>
    <li class="next"><a href="/?page=2">Suivant »</a></li>
</ul>

Code CSS de la liste


ul
{
    border:0; 
    margin:0; 
    padding:0;
}

#pagination-digg li
{
    border:0; 
    margin:0; 
    padding:0;
    font-size:11px;
    list-style:none;
    margin-right:2px;
}

#pagination-digg a
{
    border:solid 1px #9aafe5;
    margin-right:2px;
}

#pagination-digg .previous-off, #pagination-digg .next-off 
{
    border:solid 1px #DEDEDE;
    color:#888888;
    display:block;
    float:left;
    font-weight:bold;
    margin-right:2px;
    padding:3px 4px;
}

#pagination-digg .next a, #pagination-digg .previous a 
{
    font-weight:bold;
}

#pagination-digg .active
{
    background:#2e6ab1;
    color:#FFFFFF;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
}

#pagination-digg a:link, #pagination-digg a:visited 
{
    color:#0e509e;
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
}

#pagination-digg a:hover
{
    border:solid 1px #0e509e;
}

Pagination Standard

Si vous êtes du type plus conventionnel, voici donc une pagination un peu plus commune et classique :

Encore une fois, copier la structure que nous avons évoquée un peu plus haut et modifier encore une fois l'ID de la liste par « pagination-clean ».

Code (X)HTML de la liste


<ul id="pagination-clean">
    <li class="previous-off">« Précédent</li>
    <li class="active">1</li>
    <li><a href="/?page=2">2</a></li>
    <li><a href="/?page=3">3</a></li>
    <li><a href="/?page=4">4</a></li>
    <li><a href="/?page=5">5</a></li>
    <li><a href="/?page=6">6</a></li>
    <li><a href="/?page=7">7</a></li>
    <li class="next"><a href="/?page=2">Suivant »</a></li>
</ul>

Code CSS de la liste


ul
{
    border:0; 
    margin:0; 
    padding:0;
}

#pagination-clean li
{
    border:0; 
    margin:0; 
    padding:0;
    font-size:11px;
    list-style:none;
}

#pagination-clean li, #pagination-clean a
{
    border:solid 1px #DEDEDE;
    margin-right:2px;
}

#pagination-clean .previous-off, #pagination-clean .next-off 
{
    color:#888888;
    display:block;
    float:left;
    font-weight:bold;
    padding:3px 4px;
}

#pagination-clean .next a, #pagination-clean .previous a 
{
    font-weight:bold;
    border:solid 1px #FFFFFF;
}

#pagination-clean .active
{
    color:#00000;
    font-weight:bold;
    display:block;
    float:left;
    padding:4px 6px;
}

#pagination-clean a:link, #pagination-clean a:visited 
{
    color:#0033CC;
    display:block;
    float:left;
    padding:3px 6px;
    text-decoration:none;
}

#pagination-clean a:hover
{
    text-decoration:none;
}

Remerciements

Tous mes remerciements à julp pour sa relecture.

Version PDF (Miroir) Version hors-ligne (Miroir)

(1)	Cet article a été publié à l'origine à l'adresse suivante : Créer de superbe pagination à l'aide de HTML et CSS

Copyright © 29/04/2008 Dave Lizotte. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.