CSS. Paginare

Zilele trecute aveam nevoie sa stilizez paginarea unui site, si am gasit intr-un tutorial o metoda simpla care prin intermediului unei liste <ol> si CSS putem forma o paginare destul de simpatica. Iata exemplul:
Codul HTML

<ol class="pagination">
      <li><a href="prev.html" rel="prev">Prev</a></li>
      <li><a href="1.html">1</a></li>
      <li><a href="2.html">2</a></li>
      <li><a href="3.html">3</a></li>
      <li><a href="4.html">4</a></li>
      <li><a href="5.html">5</a></li>
      <li><a href="next.html" rel="next">Next</a></li>
</ol>


Codul CSS

ol.pagination{
    margin:0;
    padding:0;
    list-style-type:none;
}
ol.pagination li{
    float:left;
    margin-right:0.6em;
}
ol.pagination a,
ol.pagination li.selected{
    display:block;
    padding:0.2em 0.5em;
    border:solid 1px #ccc;
    text-decoration:none;
}
ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.selected{
    background-color:#A4BFEF;
    color:white;
}
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"]{
    border:none;
}
ol.pagination a[rel="prev"]:before{
    content:"\00AB";
    padding-right:0.5em;
}
ol.pagination a[rel="next"]:after{
    content:"\00BB";
    padding-right:0.5em;
}

De notat ca "\00AB" si "\00BB" din CSS corespunde << si >> care sunt alaturi de Prev si Next din paginare.
Iata ce s-a primit la mine:

2 comentarii:

  1. nu merge cand apas pe next sau pe prev...
    Ce trebuie sa fac??????

    RăspundețiȘtergere
  2. Trebuia un pic de jquery :D... tutorialul prevede doar "scheletul" nu și "motorul"

    RăspundețiȘtergere