MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Actualités Geek Web 2.0 & Webdesign

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

Yahoo Style (Download CSS)
1234567199200

Meneame Style (Download CSS) (IMAGE)
1234567199200

Flickr Style (Download CSS)
1234567199200

Sabros.us Style (Download CSS)
1234567199200

Green Style (Download CSS)
1234567199200

Gray Style (Download CSS)
1234567199200

Black Style (Download CSS) (IMAGE 1, IMAGE 2)
1234567199200
Black-Red Style (Download CSS)
1234567199200

Gray Style 2 (Download CSS)
1234567199200

Yellow Style (Download CSS)
1234567199200

Jogger Style (Download CSS)
1234567199200

starcraft 2 Style (Download CSS)
1234567199200

Tres Style (Download CSS)
1234567199200

512megas Style (Download CSS)
1234567199200

Technorati Style (Download CSS)
1234567199200

YouTube Style (Download CSS)
Prev1234567199200Next

MSDN Search Style (Download CSS)
◄ Prev1234567199200Next ►

Badoo Style (Download CSS)
◄ Prev1234567199200Next ►

Blue Style (Download CSS)
◄ Prev1234567199200Next ►
N’hésitez pas à me laisser des commentaires après vos essais.

Source : mis-algoritmos

AddThis Social Bookmark Button

17 commentaires, commentaire ou Trackback

  1. 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 ?

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

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

  4. Merci beaucoup MedBlog
    juste une remarque pour l’encodage du â–º j’ai pas pu l’utiliser :(, j’ai lui remplacé par >> ou

  5. Oui bien sûr, ca gène en rien, mais je ne vois pas pourquoi ca n’a pas fonctionné pour toi

  6. cette page est encodé à UTF-8
    donc il faut que ta page soit en UTF-8 pour que ca marche
    tu vois !

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

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

  9. Achjijem Nafee

    Viva Drari
    Excellent, merci…. :)

  10. Prince Turk

    salut j’aimerais bien mettre sur sous mon blogger est-ce possible et comment faire merci

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

  12. bonjour j ai un gros soucis
    depuis une semaine il n y que 5 messages
    par page qui s affichent ca n était pas le cas avant !!!blogger a tout changer
    j ai bien reglé le nombre de messages sur 20
    mais je ne constate aucun changement par la suite . je commence a en avoir marre de blooger
    car beaucoup ont exactement le meme probleme
    que moi
    je crois que je vais abandonner blooger de colere !!!!
    pascal665.blogspot.com merci d avance
    a moins que q uelqun puisse m aider ??

  13. Très utile! Merci

  14. Someone essentially help to make seriously posts I would state. This is the very first time I frequented your website page and thus far? I surprised with the research you made to make this particular publish amazing. Great job!

  15. You have a few useful pointers on this site. This is a well written article that I have bookmarked for future reference. Have a great day

Répondre á “Tutorial de création d’une barre de pagination tout en CSS avec 15 exemples”

Recevez les derniers articles par mail :

 

Recent Comments

Par Albert Einstein

“La connaissance s'acquiert par l'expérience. Tout le reste n'est que de l'information.”

Feedburner RSS
Ajoute a Technorati Favoris