Tutoriaux

Créer de superbe pagination à l'aide de HTML et CSS

Antonio Lupetti

Mar 17 |14:06

Mise à jour le Lundi, 17 Mars 2008 19:43

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 HTML et de CSS afficher une superbe pagination.

L'article qui suit ce 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é à 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 :

Suivant/Précédent bouton (désactiver)
Page active
Sélecteur
Suivant/Précédent bouton (activer)

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

Flickr-like pagination: HTML

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

Le code 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.

<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).

Flickr-like pagination: CSS

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;
}

Digg-like pagination: HTML

Maintenant, voici ce qu'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 » :

<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>

Digg-like pagination: CSS

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
}

Standard pagination : HTML

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 ».

<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>

Standard pagination : Css

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;
}

Envoyer par mail

Vu: 7069

Commentaires (0) Add Comment