Tutorial de création d’une barre de pagination tout en CSS avec 15 exemples
En a déjà vu comment créer un effet glace sur une image en utilisant un Js et aussi comme personnaliser c’est bouton radio et Checkboxes, Cette fois si nous allons voir comment créer et personnaliser la pagination de votre site ou blog en Xhtml/CSS .
Premier partie :
Téléchargez et placez le fichier pagination.css dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce style CSS entre <head> et </head> :
<link href="pagination.css" rel="stylesheet" type="text/css" media="screen" />
Faites attention au paramètre “src” qui indique l’emplacement du script.
Contenu du fichier CSS pagination.css
/*CSS style pagination*/
div.pagination {
padding: 3px;
margin: 3px;
text-align:center;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;
text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.digg a:active {
border: 1px solid #000099;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
color: #DDD;
}
Deuxième partie :
Ajoutez la class à la balise qui va servir de conteneur (div) pour afficher l’effet
<div class="pagination"> <span class="disabled">◄</span> <span class="current">1</span> <a href="#?page=2">2</a> <a href="#?page=3">3</a> <a href="#?page=4">4</a> <a href="#?page=5">5</a> <a href="#?page=6">6</a> <a href="#?page=7">7</a> ... <a href="#?page=199">199</a> <a href="#?page=200">200</a> <a href="#?page=2">►</a> </div>
Le résultat final :
Voici 15 style possible pour votre pagination, il ne vous reste qu’a télécharger le fichier CSS du style que vous souhaite avoir et l’intègre comme je l’ai exemple dans le tutoria.
Digg Style (Download CSS)
◄1234567…199200►
Yahoo Style (Download CSS)
◄1234567…199200►
Meneame Style (Download CSS) (IMAGE)
◄1234567…199200►
Flickr Style (Download CSS)
◄1234567…199200►
Sabros.us Style (Download CSS)
◄1234567…199200►
Green Style (Download CSS)
◄1234567…199200►
Gray Style (Download CSS)
◄1234567…199200►
Black Style (Download CSS) (IMAGE 1, IMAGE 2)
◄1234567…199200► Black-Red Style (Download CSS)
◄1234567…199200►
Gray Style 2 (Download CSS)
◄1234567…199200►
Yellow Style (Download CSS)
◄1234567…199200►
Jogger Style (Download CSS)
◄1234567…199200►
starcraft 2 Style (Download CSS)
◄1234567…199200►
Tres Style (Download CSS)
◄1234567…199200►
512megas Style (Download CSS)
◄1234567…199200►
Technorati Style (Download CSS)
◄1234567…199200►
YouTube Style (Download CSS)
Prev1234567…199200Next
MSDN Search Style (Download CSS)
◄ Prev1234567…199200Next ►
Badoo Style (Download CSS)
◄ Prev1234567…199200Next ►
Blue Style (Download CSS)
◄ Prev1234567…199200Next ► N’hésitez pas à me laisser des commentaires après vos essais.
Source : mis-algoritmos
13 commentaires, commentaire ou Trackback
melusine
Salut je comprends pas tout.
j’ai essayé de mettre tous ces codes en place mais quand je cliquais par exemple sur la page 5 c’était toujours la page d’acceuil..
j’ai du me trompé dans l’emplacement du code Div.. Pourrais-tu m’aider stp ?
5 octobre 2007
MedBlog
Tu veux dire quoi par les mettre en place, juste pour information, tous ses exemples sont des structure CSS qui ne peuve être réellement utiliser si il n’a pas un code PHP qui généré la pagination de tes pages (calcule le nombre de page et rajout les liens)
5 octobre 2007
SuN
Excellent, merci.
pour le code php/SQL qui va avec, celui-ci est très bien:
http://www.phpcs.com/codes/PAGINATION-AUTOMATIQUE-APPEL-FONCTIONS-PHP_39392.aspx
30 octobre 2007
Reda Makhchan
Merci beaucoup MedBlog
juste une remarque pour l’encodage du â–º j’ai pas pu l’utiliser :(, j’ai lui remplacé par >> ou
28 décembre 2007
MedBlog
Oui bien sûr, ca gène en rien, mais je ne vois pas pourquoi ca n’a pas fonctionné pour toi
28 décembre 2007
elarsoft
cette page est encodé à UTF-8
donc il faut que ta page soit en UTF-8 pour que ca marche
tu vois !
28 décembre 2007
Reda Makhchan
Ma page est UTF-8, mais au niveau du code comment je peux utilisé la fléche ◄? y a t il un code ascii ou quelque chose comme ça pour cet caractere?
28 décembre 2007
Reda Makhchan
Cp1252 encoding :)
ça marche maintnt le problème été au niveau de workSpace, j’ai trouvé ma solution ici :
http://rubricabrac.blogspot.com/2006/12/howto-encoding-ouvrir-sous-linux-un.html
Merçi Med :)
28 décembre 2007
Achjijem Nafee
Viva Drari
Excellent, merci…. :)
7 janvier 2008
Prince Turk
salut j’aimerais bien mettre sur sous mon blogger est-ce possible et comment faire merci
13 juin 2009
Kud
Hello,
Bon tutorial, je m’en suis inspiré pour faire ma pagination.
Cependant, j’ai apporté un correctif, j’ai tout passé en ul / li pour respecter un peu plus la sémantique, si tu veux le patch, n’hésite pas à me contacter.
27 janvier 2010
Répondre á “Tutorial de création d’une barre de pagination tout en CSS avec 15 exemples”