CSS implementation of pagination effect of the production of examples, tutorials and code as follows:
This tutorial explains how to design pagination for search results or longer record lists. Because I am often asked this question, I decided to send a post to show how to design the perfect pagination style with a small amount of HTML and CSS code.
This tutorial also contains HTML/CSS code that implements Flickr, Digg, and simple pagination styles that can be applied to your Web project at any time.
Update as March, 2008:my friends Simone Saveri solved some with issuse and IE6.
Download this tutorial (original)
Download This tutorial (Simone saveri version)
A typical paging structure
The following figure shows a typical paging structure
Generally you can see that there are four main elements:
-Previous page/next page button (not available)
-current Page
-Standard page Selector
-Previous page/Next page button (available)
You can design such a structure by using an HTML list (<ul>) that contains <li> tags (each <li> each have a separate page element) and assign an ID to <ul> list to apply a specific paging style to the current list. Take a look at the tutorials below for instructions.
Flickr pagination: HTML code
imagine the Flickr page style you want to design as follows:
The HTML code is very simple, and you can just change the ID of <ul> to apply the structure to all pagination styles (in this case I added "pagination-flickr", as the following bold code)
<ul id= "Pagination-flickr" >
<li class= "Previous-off" >«Previous</li>
<li class= "Active" >1</li>
<li><a href= "? page=2" >2</a></li>
<li><a href= "? page=3" >3</a></li>
<li><a href= "? page=4" >4</a></li>
<li><a href= "? page=5" >5</a></li>
<li><a href= "? page=6" >6</a></li>
<li><a href= "? page=7" >7</a></li>
<li class= "Next" ><a href= "page=2" >Next»</a></li> </ul>
Now you just need to redefine the attributes of the CSS tags (ul, Li, a).
Flickr pagination: CSS Code
very simple:
ul{border:0; margin:0; padding:0;}
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
List-style:none; }
#pagination-flickr a{
Border:solid 1px #DDDDDD;
margin-right:2px; }
#pagination-flickr Previous-off,
#pagination-flickr. Next-off {
Color: #666666;
Display:block;
Float:left;
Font-weight:bold;
PADDING:3PX 4px; }
#pagination-flickr. Next A,
#pagination-flickr. Previous a {
Font-weight:bold;
Border:solid 1px #FFFFFF; }
#pagination-flickr. active{
Color: #ff0084;
Font-weight:bold;
Display:block;
Float:left;
PADDING:4PX 6px; }
#pagination-flickr A:link,
#pagination-flickr a:visited {
Color: #0063e3;
Display:block;
Float:left;
PADDING:3PX 6px;
Text-decoration:none; }
#pagination-flickr a:hover{
Border:solid 1px #666666; }
Digg Pagination: HTML code
Okay, now you want to design a digg-style pagination like this:
Copy the HTML structure from the previous tutorial and paste it. You only need to change the <ul> ID (replace "Pagination-digg" as "Pagination-flickr")
<ul id= "Pagination-digg" >
<li class= "Previous-off" >«Previous</li>
<li class= "Active" >1</li>
<li><a href= "? page=2" >2</a></li>
<li><a href= "? page=3" >3</a></li>
<li><a href= "? page=4" >4</a></li>
<li><a href= "? page=5" >5</a></li>
<li><a href= "? page=6" >6</a></li>
<li><a href= "? page=7" >7</a></li>
<li class= "Next" ><a href= "page=2" >Next»</a></li> </ul>
Digg pagination: CSS Code
CSS code is very similar to the previous Flickr pagination example. You just have to modify some of the attributes and change the #pagination-flikr to #pagination-digg, CSS pagination elements need not be modified:
ul{border:0; margin:0; padding:0;}
#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
List-style:none;
margin-right:2px; }
#pagination-digg a{
Border:solid 1px #9aafe5
margin-right:2px; }
#pagination-digg Previous-off,
#pagination-digg. Next-off {
Border:solid 1px #DEDEDE
Color: #888888
Display:block;
Float:left;
Font-weight:bold;
margin-right:2px;
PADDING:3PX 4px; }
#pagination-digg. Next A,
#pagination-digg. Previous a {
Font-weight:bold;
}
#pagination-digg. active{
Background: #2e6ab1;
Color: #FFFFFF;
Font-weight:bold;
Display:block;
Float:left;
PADDING:4PX 6px; }
#pagination-digg A:link,
#pagination-digg a:visited {
Color: #0e509e
Display:block;
Float:left;
PADDING:3PX 6px;
Text-decoration:none; }
#pagination-digg a:hover{
Border:solid 1px #0e509e}
concise pagination style: HTML code
If you prefer a small, concise design, this example will show you how to design a simple pagination style as shown in the following illustration:
The HTML structure is the same as the previous two examples. All you have to do is change the ID of <ul> to "Pagination-clean":
<ul id= "Pagination-clean" >
<li class= "Previous-off" >«Previous</li>
<li class= "Active" >1</li>
<li><a href= "? page=2" >2</a></li>
<li><a href= "? page=3" >3</a></li>
<li><a href= "? page=4" >4</a></li>
<li><a href= "? page=5" >5</a></li>
<li><a href= "? page=6" >6</a></li>
<li><a href= "? page=7" >7</a></li>
<li class= "Next" ><a href= "page=2" >Next»</a></li> </ul>
concise pagination style: CSS code
The CSS code for this pagination style is as follows:
ul{border:0; margin:0; padding:0;}
#pagination-clean li{
border:0; margin:0; padding:0;
font-size:11px;
List-style:none; }
#pagination-clean Li, #pagination-clean a{
Border:solid 1px #DEDEDE
margin-right:2px; }
#pagination-clean Previous-off,
#pagination-clean. Next-off {
Color: #888888
Display:block;
Float:left;
Font-weight:bold;
PADDING:3PX 4px; }
#pagination-clean. Next A,
#pagination-clean. Previous a {
Font-weight:bold;
Border:solid 1px #FFFFFF; }
#pagination-clean. active{
Color: #00000
Font-weight:bold;
Display:block;
Float:left;
PADDING:4PX 6px; }
#pagination-clean A:link,
#pagination-clean a:visited {
Color: #0033CC
Display:block;
Float:left;
PADDING:3PX 6px;
Text-decoration:none; }
#pagination-clean a:hover{
Text-decoration:none; }
