PayneLess Designs - CSS Pagination Links

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>CSS Pagination Links</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="Thu, 21 Jun 2012 13:26:42 GMT" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
* { margin: 0; padding: 0; border: 0; } /* partial browser reset */
html, body { width: 100%; height: 100%; font-size: 150%; }

h1, h2, h3, p { text-align: center; margin: 2% 0; }

p { font-size: 1.15em;  }

.clr { clear: both; }

#wrap { width: 960px; margin: 0 auto; border: .5em ridge #0f0; }
/* ----- START Example 1 Style Rules ----- */
.pagination {
width: 500px; height: 24px;
margin: 0 auto;
padding: 2px;
}

.pagination ul {
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

.pagination li {
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination a, .pagination a:visited {
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}

.pagination a:hover, .pagination a:active {
border: 1px solid #2b66a5;
color: #000;
background-color: #ffff80;
}

.pagination a.currentpage {
background-color: #2e6ab1;
color: #fff !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}

.pagination a.disablelink, .pagination a.disablelink:hover {
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}

.pagination a.prevnext {
font-weight: bold;
}
/* ----- END Example 1 Style Rules ----- */

/* ----- START Example 2 Style Rules ----- */
.pagination2 {
width: 500px; height: 24px;
float: left; padding: 2px;
}

.pagination2 ul {
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

.pagination2 li {
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination2 a, .pagination2 a:visited {
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}

.pagination2 a:hover, .pagination2 a:active {
border: 1px solid #2b66a5;
color: #000;
background-color: #ffff80;
}

.pagination2 a.currentpage {
background-color: #2e6ab1;
color: #fff !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}

.pagination2 a.disablelink, .pagination2 a.disablelink:hover {
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}

.pagination2 a.prevnext {
font-weight: bold;
}
/* ----- END Example 2 Style Rules ----- */

/* ----- START Example 3 Style Rules ----- */
.pagination3 {
width: 500px; height: 24px;
float: right; padding: 2px;
}

.pagination3 ul {
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

.pagination3 li {
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination3 a, .pagination3 a:visited {
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}

.pagination3 a:hover, .pagination3 a:active {
border: 1px solid #2b66a5;
color: #000;
background-color: #ffff80;
}

.pagination3 a.currentpage {
background-color: #2e6ab1;
color: #fff !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}

.pagination3 a.disablelink, .pagination3 a.disablelink:hover {
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}

.pagination3 a.prevnext {
font-weight: bold;
}
/* ----- END Example 3 Style Rules ----- */

/* ----- START Example 3 Style Rules ----- */
.pagination4 {
width: 500px; height: 24px;
margin: 0 auto;
position: relative; bottom: 0;
padding: 2px;
}

.pagination4 ul {
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

.pagination4 li {
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination4 a, .pagination4 a:visited {
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}

.pagination4 a:hover, .pagination4 a:active {
border: 1px solid #2b66a5;
color: #000;
background-color: #ffff80;
}

.pagination4 a.currentpage {
background-color: #2e6ab1;
color: #fff !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}

.pagination4 a.disablelink, .pagination4 a.disablelink:hover {
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}

.pagination4 a.prevnext {
font-weight: bold;
}
/* ----- END Example 4 Style Rules ----- */
</style>
</head><body>
<h1>CSS Pagination Links</h1>
<p>&#8668; Modified and recoded by PayneLess Designs &#8669;</p>

<div id="wrap"><!-- START Content Wrap -->

<!-- START Example One -->
<div class="pagination">
<ul>
<li><a href="#_NoGo" title="Page Number" class="prevnext disablelink">&#8656; PREVIOUS</a></li>
<li><a href="#_NoGo" title="Page Number" class="currentpage">1</a></li>
<li><a href="#_NoGo" title="Page Number">2</a></li>
<li><a href="#_NoGo" title="Page Number">3</a></li>
<li><a href="#_NoGo" title="Page Number">4</a></li>
<li><a href="#_NoGo" title="Page Number">5</a></li>
<li><a href="#_NoGo" title="Page Number">6</a></li>
<li><a href="#_NoGo" title="Page Number">7</a></li>
<li><a href="#_NoGo" title="Page Number">8</a></li>
<li><a href="#_NoGo" title="Page Number">9</a>...</li>
<li><a href="#_NoGo" title="Page Number">15</a></li>
<li><a href="#_NoGo" title="Page Number">16</a></li>
<li><a href="#_NoGo" title="Page Number" class="prevnext">NEXT &#8658;</a></li>
</ul>
</div>
<p>Example 1 above is positioned center top.</p>
<!-- END Example One -->

<!-- START Example Two -->
<div class="pagination2">
<ul>
<li><a href="#_NoGo" title="Page Number" class="prevnext disablelink">&#8656; PREVIOUS</a></li>
<li><a href="#_NoGo" title="Page Number" class="currentpage">1</a></li>
<li><a href="#_NoGo" title="Page Number">2</a></li>
<li><a href="#_NoGo" title="Page Number">3</a></li>
<li><a href="#_NoGo" title="Page Number">4</a></li>
<li><a href="#_NoGo" title="Page Number">5</a></li>
<li><a href="#_NoGo" title="Page Number">6</a></li>
<li><a href="#_NoGo" title="Page Number">7</a></li>
<li><a href="#_NoGo" title="Page Number">8</a></li>
<li><a href="#_NoGo" title="Page Number">9</a>...</li>
<li><a href="#_NoGo" title="Page Number">15</a></li>
<li><a href="#_NoGo" title="Page Number">16</a></li>
<li><a href="#_NoGo" title="Page Number" class="prevnext">NEXT &#8658;</a></li>
</ul>
</div>
<div class="clr"></div>
<p>Example 2 above is positioned left.</p>
<!-- END Example Two -->

<!-- START Example Three -->
<div class="pagination3">
<ul>
<li><a href="#_NoGo" title="Page Number" class="prevnext disablelink">&#8656; PREVIOUS</a></li>
<li><a href="#_NoGo" title="Page Number" class="currentpage">1</a></li>
<li><a href="#_NoGo" title="Page Number">2</a></li>
<li><a href="#_NoGo" title="Page Number">3</a></li>
<li><a href="#_NoGo" title="Page Number">4</a></li>
<li><a href="#_NoGo" title="Page Number">5</a></li>
<li><a href="#_NoGo" title="Page Number">6</a></li>
<li><a href="#_NoGo" title="Page Number">7</a></li>
<li><a href="#_NoGo" title="Page Number">8</a></li>
<li><a href="#_NoGo" title="Page Number">9</a>...</li>
<li><a href="#_NoGo" title="Page Number">15</a></li>
<li><a href="#_NoGo" title="Page Number">16</a></li>
<li><a href="#_NoGo" title="Page Number" class="prevnext">NEXT &#8658;</a></li>
</ul>
</div>
<div class="clr"></div>
<p>Example 3 above is positioned right.</p>
<!-- END Example Three -->

<!-- START Example Three -->
<div class="pagination4">
<ul>
<li><a href="#_NoGo" title="Page Number" class="prevnext disablelink">&#8656; PREVIOUS</a></li>
<li><a href="#_NoGo" title="Page Number" class="currentpage">1</a></li>
<li><a href="#_NoGo" title="Page Number">2</a></li>
<li><a href="#_NoGo" title="Page Number">3</a></li>
<li><a href="#_NoGo" title="Page Number">4</a></li>
<li><a href="#_NoGo" title="Page Number">5</a></li>
<li><a href="#_NoGo" title="Page Number">6</a></li>
<li><a href="#_NoGo" title="Page Number">7</a></li>
<li><a href="#_NoGo" title="Page Number">8</a></li>
<li><a href="#_NoGo" title="Page Number">9</a>...</li>
<li><a href="#_NoGo" title="Page Number">15</a></li>
<li><a href="#_NoGo" title="Page Number">16</a></li>
<li><a href="#_NoGo" title="Page Number" class="prevnext">NEXT &#8658;</a></li>
</ul>
</div>
<div class="clr"></div>
<p>Example 4 above is positioned center bottom.</p>
<!-- END Example Four -->

</div><!-- END Content Wrap -->
<p>Thanks to <a href="http://www.dynamicdrive.com/style/csslibrary/item/css_pagination_links/" title="CSS Pagination Links">DynamicDrive</a> for original code!</p>
</body></html>