Posted By

webDesign on 08/03/06


Tagged

css pagination


Versions (?)

Who likes this?

9 people have marked this snippet as a favorite

xaviaracil
Navegante
meth
inakiabt
Hirmine
tavo
vali29
monapdx
m4tik


Enlaces de paginación / Pagination links


 / Published in: CSS
 

  1. ***** CSS *****
  2. .paginacion{margin:0 20px 20px 0; padding:2px}
  3. .paginacion ul{margin:0; padding:0; text-align:right; font-size:16px}
  4. .paginacion li{list-style-type:none; display:inline; padding-bottom:1px}
  5. .paginacion a, .paginacion a:visited{padding:0 5px; border:1px solid #9C3D3D; text-decoration:none; color:#000}
  6. .paginacion a:hover, .paginacion a:active{border:1px solid #9C3D3D; color:#9C3D3D; background:#EFEFEF}
  7. .paginacion a.paginaActual{background:#9C3D3D; color:#FFF !important; border-color:#9C3D3D; font-weight:700; cursor:default}
  8. .paginacion a.deshabilitado, .paginacion a.deshabilitado:hover{background:#FFF; cursor:default; color:#929292; border-color:#929292; font-weight:400 !important}
  9. .paginacion a.anteriorSiguiente{font-weight:700}
  10.  
  11. ***** HTML *****
  12. <div class="paginacion">
  13. <ul>
  14. <li><a href="#" class="anteriorSiguiente deshabilitado">« anterior</a></li>
  15. <li><a href="#" class="paginaActual">1</a></li>
  16. <li><a href="#">2</a></li>
  17. <li><a href="#">3</a></li>
  18. <li><a href="#">4</a></li>
  19. <li><a href="#">5</a>...</li>
  20. <li><a href="#">9</a></li>
  21. <li><a href="#">10</a></li>
  22. <li><a href="#" class="anteriorSiguiente">siguiente »</a></li>
  23. </ul>
  24. </div>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: imbuez on August 20, 2006

Sorry to be a bore but this code is very much broken in IE ;)

You need to login to post a comment.