Posted By

shellydennison on 01/15/08

Tagged

css
html

Versions (?)

Last Edited at 01/15/08 11:23am

Statistics

Viewed 585 times

Favorited by 2 user(s)

Related snippets

Pagination Links

/ Published in: CSS

This code is based on enlaces de paginacin posted by Web Design

Highlighted TextExpand

------- CSS --------

.paging{margin:0 20px 20px 0; padding:2px}
.paging ul{margin:0; padding:0; text-align:left;}
.paging li{list-style-type:none; display:inline; padding-bottom:1px}
.paging a, .paging a:visited{padding:0 5px;  text-decoration:none; color: #666}
.paging a:hover, .paging a:active{ color:#000; background:#eee; text-decoration: none;}
.paging a.current, .paging a:hover.current {background:#000; color:#FFF !important; border-color:#9C3D3D; font-weight:bold; cursor:default}
.paging a.next, .paging a:visited.next{ color: #B72A26;}
.paging a:hover.next{text-decoration: underline; background: none;}
.paging a.disabled, .paging a.disabled:hover{background: none; cursor:default; font-weight: normal;  text-decoration: none;}

------- HTML --------

<div class="paging">
		<ul>
		<li><a href="#" class="next disabled">Â« previous</a></li>
		<li><a href="#" class="current">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a>...</li>
		<li><a href="#">9</a></li>
		<li><a href="#">10</a></li>
		<li><a href="#" class="next">next Â»</a></li>
		</ul>
	</div>

URL: /view/717/enlaces-de-paginacin--pagination-links/

Report this snippet Tweet