Posted By

shellydennison on 01/15/08


Tagged

css paging html pagination


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

arala22
Mithun
shellydennison
monapdx
WinterCrow


Pagination Links


 / Published in: CSS
 

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

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

  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>

Report this snippet  

You need to login to post a comment.