Perfect Pagination Approach Using CSS

perfect pagination styleThis tutorial will help you to design a pagination style for dividing a long list of data in extra pages or just for search result. This is a very simple blog post which illustrates how to design a perfect pagination approach using a semantic and clean coding in HTML and CSS. Into this tutorial we have provided HTML and CSS code for pagination styles of Flickr, Digg and simple. You can use this code into your personal or commercial projects.

perfect pagination style

Pagination Structure

Here is the common and classic pagination structure used in everywhere. It has four essential elements. i.e.

perfect pagination style

– Disabled Previous/Next Button
– Highlighted Active Page
– Regular Page Selector
– Enabled Previous/Next Button

HTML list (<ul>) having <li> elements is commonly used to design this structure and id is applied to corresponding <ul>. Take a look at tutorial for an explanation.

HTML Code: Flickr Style Pagination

The Flickr style pagination will be look like this:

Flickr style pagination

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

CSS Code: Flickr Style Pagination

Here is the CSS for to support above HTML code.

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;

}

HTML Code: Digg Style Pagination

Digg style pagination will be look like this.

Digg style pagination

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

 

CSS Code: Digg Style Pagination

CSS code for this pagination is very to Flickr style pagination CSS code.

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

}

HTML Code: Clean Pagination Style

Minimal and clean designs are liked by everybody. So we have provided clean style pagination for you.

clean style pagination
<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>

CSS Code: Clean Pagination Style

Here is the CSS code for clean styled pagination.

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;

}