Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples

1 octobre 2007

Tutorial de création d’une barre de pagination tout en CSS avec 15 exemples

Barre de pagination CSS
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)
◄12 3 4 5 6 7…199 200 ►
Yahoo Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Meneame Style (Download CSS) (IMAGE)
◄12 3 4 5 6 7…199 200 ►
Flickr Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Sabros.us Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Green Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Gray Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Black Style (Download CSS) (IMAGE 1, IMAGE 2)
◄12 3 4 5 6 7…199 200 ► Black-Red Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Gray Style 2 (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Yellow Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Jogger Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
starcraft 2 Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Tres Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
512megas Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
Technorati Style (Download CSS)
◄12 3 4 5 6 7…199 200 ►
YouTube Style (Download CSS)
Prev12 3 4 5 6 7…199 200 Next
MSDN Search Style (Download CSS)
◄ Prev12 3 4 5 6 7…199 200 Next ►
Badoo Style (Download CSS)
◄ Prev12 3 4 5 6 7…199 200 Next ►
Blue Style (Download CSS)
◄ Prev12 3 4 5 6 7…199 200 Next ► N’hésitez pas à me laisser des commentaires après vos essais.

Source : mis-algoritmos

10 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

La Guimauve du Web » Quelques news sur les css - 3 octobre 2007