Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A Digg-like, Flickr-like Pagination Style Using CSS

DZone's Guide to

A Digg-like, Flickr-like Pagination Style Using CSS

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.

[img_assist|nid=3986|title=|desc=|link=none|align=none|width=420|height=110]

This tutorial also includes HTML/CSS code to implement a Flickr-like, Digg-like, Clean pagination style ready to use in your web projects.

Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and IE7.

Download this tutorial (original)

Download this tutorial (Simone Saveri version)

Typical pagination structure

The following image represents an example of a typical pagination structure:

[img_assist|nid=3987|title=|desc=|link=none|align=none|width=335|height=162]

In general you can identify four main elements:

- Previous/Next button (disabled)
- Current Active page
- Standard Page selector
- Previous/Next button (enabled)
You can design this structure using an HTML list ( <ul>) which contains some <li> elements (one for each pagination element) and apply an ID to the <ul> list to assign a specific pagination style to the current list. Take a look at these tutorials for an explanation.


Flickr-like pagination: HTML Code

Image you want to design a Flickr-like pagination style which looks like this:

[img_assist|nid=3988|title=|desc=|link=none|align=none|width=266|height=46]

HTML code is very simple and you can reuse this structure in all pagination-style you want only changing the <ul> ID (in this case I added "pagination-flickr", in bold in the code below):

<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 have only to redefine CSS element properties (ul, li, a).

Flickr-like pagination: CSS Code

Is 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-like pagination: HTML Code

Ok, now you want to design a Digg-like pagination style which looks like this:

[img_assist|nid=3989|title=|desc=|link=none|align=none|width=277|height=33]

From the previous tutorial copy and paste the HTML structure. You have only to change the <ul> ID ("pagination-digg" instead of "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-like pagination: CSS Code

CSS code is very similar to the previous Flickr-like example.You have only to change some attributes, and modify #pagination-flikr ID with #pagination-digg, but CSS pagination elements don't change:

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
}

Clean pagination style: HTML Code

If you like minimal, clean design this example shows how to design a very clean pagination style which looks like this:

[img_assist|nid=3990|title=|desc=|link=none|align=none|width=270|height=34]

HTML structure is the same of two previous examples. The only thing you have to change is the <ul> ID with "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>

Clean pagination style: CSS Code

CSS code for this kind of pagination style is:

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;
}

Download this tutorial

Original Author

Original Article written by Antonio Lupetti

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Schalk Neethling. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}