Не могу найти следующую ссылку на нумерацию страниц - PullRequest
0 голосов
/ 12 июля 2011

Я работаю над нумерацией страниц, и это довольно сложно. В основном, у пагинации есть предыдущая ссылка, страницы (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;    
}

Ответы [ 2 ]

1 голос
/ 12 июля 2011

Что ж, чтобы ваша «следующая» ссылка соответствовала вашей «предыдущей» ссылке, просто добавьте отступы и поместите фон в верхний правый угол вместо верхнего левого по умолчанию.

#content div.pagination ul li.pager-next {
    ...
    ...
    background-position: right top;
}
#content div.pagination ul li.pager-next a {
    padding-right: 20px;
}
1 голос
/ 12 июля 2011

Скорее всего, ваше изображение не найдено, потому что ваш путь неверен:

background: url("../image/next.gif") no-repeat;

должно быть

background: url("../images/next.gif") no-repeat;

Взглядыкак вы ошиблись images имя каталога

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...