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:
nu merge cand apas pe next sau pe prev...
RăspundețiȘtergereCe trebuie sa fac??????
Trebuia un pic de jquery :D... tutorialul prevede doar "scheletul" nu și "motorul"
RăspundețiȘtergere