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

26 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

  16. Hi to every , since I am really eager of reading this blog’s
    post to be updated daily. It consists of good material.

  17. Hi! I could have swotn I�ve been to this wweb sikte before but after browsing through some of the posts
    I realized it�s new to me. Anyways, I�m definitely happy I came across it and I�ll be book-marking it and checkijg back frequently!

  18. Uta

    Hello, yeah this article is genuinely pleasant and I have learned lot of things from it concerning blogging.
    thanks.

  19. Quality content is the secret to interest the users to ppay a visit tthe web
    site, that’s what this site is providing.

  20. Fabulous, what a webpage it is! This website presents useful information too us,
    keep it up.

  21. We are a gaggle of volunteers and opening a brand new scheme in our community.

    Your website provided uss with useful info to
    work on. You’ve performed a formidable activity and our entire neighborhood shall be grateful to you.

  22. This site certainly has all the information I wanted about this subject
    and didn’t know who to ask.

  23. I like this site it’s a master piece! Gladd I discovered this oon google.

  24. Hi there would you mind letting me knlw which web host you’re working with?
    I’veloaded your blopg in 3 different web browsers annd
    I must say this blog loads a lot faster then most.

    Can youu suggest a good internet hosting provider at
    a fair price? Thank you, I appreciate it!

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

  • mercedes car maintenance Schedule
    Publicité Toyota YARIS
    2018-10-15 14:47:00
  • v1059977.11199.28la.com.cn
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2018-10-12 01:22:36
  • Jacquelyn
    ModalBox & ThickBox : Popup à la sauce Web 2.0
    2018-10-10 21:28:20
  • curry 4 shoes
    MultipleIEs : Installer toutes les versions du navigateur Internet Explorer
    2018-10-03 06:21:30
  • filz 4mm kaufen
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2018-09-18 14:52:13
  • source
    Fontpark, Faites de l’art avec l’alphabet japonais
    2018-09-17 11:51:06
  • compraventa relojes de lujo
    Apple prépare une version 10.4.11 de Mac OS X
    2018-09-09 03:25:34
  • Katherin
    Verify Email, contrôle vos adresse e-mail
    2018-09-01 05:34:08
  • ikan hias
    Hotspot Shield, Accédez à Pandora & Hulu hors des USA
    2018-08-31 18:05:00
  • vender relojes
    Picoshot, générer des Thumbnails de sites
    2018-08-29 09:30:16
  • propecia
    Fontpark, Faites de l’art avec l’alphabet japonais
    2018-08-26 00:29:02
  • pocket knives best
    Algérie télécoms lance un servie EVDO sur le nom Athir testé et approuvé
    2018-08-25 12:50:54
  • tooth implant Dubai
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-08-17 10:49:11
  • Hors
    Tutorial ReflectOMatic, ajouter facilement des effets de réflections
    2018-08-13 15:54:15
  • List Of Dentists In Dubai
    Tutorial de création d'une barre de pagination tout en CSS avec 15 exemples
    2018-08-08 03:04:52

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