Advanced Search

Pagination Links

/ Published in: CSS
Save to your folder(s)
This code is based on enlaces de paginacin posted by Web Design

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ------- CSS --------
  2.  
  3. .paging{margin:0 20px 20px 0; padding:2px}
  4. .paging ul{margin:0; padding:0; text-align:left;}
  5. .paging li{list-style-type:none; display:inline; padding-bottom:1px}
  6. .paging a, .paging a:visited{padding:0 5px;  text-decoration:none; color: #666}
  7. .paging a:hover, .paging a:active{ color:#000; background:#eee; text-decoration: none;}
  8. .paging a.current, .paging a:hover.current {background:#000; color:#FFF !important; border-color:#9C3D3D; font-weight:bold; cursor:default}
  9. .paging a.next, .paging a:visited.next{ color: #B72A26;}
  10. .paging a:hover.next{text-decoration: underline; background: none;}
  11. .paging a.disabled, .paging a.disabled:hover{background: none; cursor:default; font-weight: normal;  text-decoration: none;}
  12.  
  13.  
  14. ------- HTML --------
  15.  
  16. 	<div class="paging">
  17. 		<ul>
  18. 		<li><a href="#" class="next disabled">« previous</a></li>
  19. 		<li><a href="#" class="current">1</a></li>
  20. 		<li><a href="#">2</a></li>
  21. 		<li><a href="#">3</a></li>
  22. 		<li><a href="#">4</a></li>
  23. 		<li><a href="#">5</a>...</li>
  24. 		<li><a href="#">9</a></li>
  25. 		<li><a href="#">10</a></li>
  26. 		<li><a href="#" class="next">next »</a></li>
  27. 		</ul>
  28. 	</div>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.