Я работаю над нумерацией страниц, и это довольно сложно. В основном, у пагинации есть предыдущая ссылка, страницы (1,2,3,4) и следующая ссылка. Обе предыдущие и следующие ссылки имеют фоновое изображение (стрелка направления).
E.g < Previous Page 1|2|3|4 Next >
Мне удалось получить предыдущую ссылку и стрелку направления, которая является фоновым изображением, как показано выше, но не может сделать то же самое для следующей ссылки.
<div class="pagination">
<ul>
<li class="pager-prev"><a href="#">Previous</a></li>
<li>Page<a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="pager-next"><a href="#" >Next</a></li>
</ul>
</div>
#content div.pagination {
background: red;
border: 1px solid #3d373b;
float: left;
clear: both;
width: 100%;
margin: 5px 0;
padding: 2px 0;
}
#content div.pagination ul li {
float: left;
color: #dcd7d3;
position: relative;
}
#content div.pagination ul li a {
margin:0 2px 0;
color: #dcd7d3;
text-decoration: underline;
}
#content div.pagination ul li a.active {
text-decoration: none;
font-weight: bold;
}
#content div.pagination ul li.pager-prev {
margin: 0 200px 0 0;
background: url("../images/prev.gif") no-repeat;
}
#content div.pagination ul li.pager-next {
margin: 0 250px 0 0;
background: url("../images/next.gif") no-repeat;
}
#content div.pagination ul li.pager-prev a {
padding: 0 0 0 20px;
}