Creating stylish pagination links

Posted on September 21, 2008, under HTML & CSS 

Do you want to add some style to your pagination links? If so, then the following CSS Codes can help you to do that. The links should be placed inside a DIV (as it is in our example) which can be easily customized. There are cases when some navigation links are not required, such as “next” (when there are no further pages) or “previous” (when the first page is selected). You can hide or place them between the following tags to mark that they are disabled: <span class=”disabled”>Previous</span>.

First Style

<style type="text/css">

<!--
/*
Credits: BitRepository.com
*/

html, body {
background-color: white; 

color: #2B3956;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
text-align: left;
}
/* Pagination DIV */
#pg
{
width: 700px;
background-color: #FFFFFF;

text-align: center;
font-size: 10px;

margin-bottom: 5px;

padding: 10px;
}

/* Pagination Link */

#pg a {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #dddddd;
padding: 3px;
-moz-border-radius: 3px;
}

#pg a:hover {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #A7A7A7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Current Page */

#pg a.current {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #336699;
background-color: #F5F7FA;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Disabled Page */

#pg span.disabled {
font-size: 10px;
text-decoration: none;
color: #C6C7C7;
border: 1px solid #C6C7C7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px; // Rounds the corners; Works for Mozilla only
}
-->
</style>

Second style

<style type="text/css">

<!--
/*
Credits: BitRepository.com
*/

html, body {
background-color: white; 

color: #2B3956;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
text-align: left;
}
/* Pagination DIV */
#pg
{
width: 700px;
background-color: #FFFFFF;

text-align: center;
font-size: 10px;

margin-bottom: 5px;

padding: 10px;
}

/* Pagination Link */

#pg a {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #83A0C1;
padding: 3px;
-moz-border-radius: 3px;
}

#pg a:hover {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #000000;
background-color: white;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Current Page */

#pg a.current {
font-size: 10px;
text-decoration: none;
font-weight: bold;
color: white;
border: 1px solid #0D62C3;
background-color: #0D62C3;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Disabled Page */

#pg span.disabled {
font-size: 10px;
text-decoration: none;
color: #C6C7C7;
border: 1px solid #C6C7C7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px; // Rounds the corners; Works for Mozilla only
}
-->
</style>

Here’s the HTML code that should be used:

<div id="pg">
<span class='disabled'>&laquo; Previous</span>&nbsp;&nbsp;<a class="current"  href='pagination.php?number=1'>1</a>
&nbsp;&nbsp;<a href='pagination.php?number=2'>2</a>

&nbsp;&nbsp;<a href='pagination.php?number=3'>3</a>
&nbsp;&nbsp;<a href='pagination.php?number=4'>4</a>
&nbsp;&nbsp;<a href='pagination.php?number=5'>5</a>

&nbsp;&nbsp;<a href='pagination.php?number=6'>6</a>
&nbsp;&nbsp;<a href='pagination.php?number=7'>7</a>
&nbsp;&nbsp;<a href='pagination.php?number=8'>8</a>

&nbsp;&nbsp;<a href='pagination.php?number=9'>9</a>
&nbsp;&nbsp;<a href='pagination.php?number=10'>10</a>
&nbsp;&nbsp;<a href='pagination.php?number=2'>Next &raquo;</a>

</div>

Note The downloadable archive with the pagination styles also has 2 pages with PHP code that is used for the live demo. This way you can navigate through links and see how the current page is selected/emphasized or how the next and previous links are disabled when you don’t need them anymore.


Related Posts

Comment via Facebook

4 Replies to "Creating stylish pagination links"

  1. I hope this can be used in Blogger :0

  2. Hi I’m polas.
    I have the problem with this pagination content.
    how can change the links like http://mrblackscripts.3owl.com/pager/pagination.php?number=1 to
    http://mrblackscripts.3owl.com/pager/pagination.php?number=2

    And what i have in the second page.
    This is the test i tried the pagination is good but i do not see how make it work for pages with all contents.

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.