CODEWITHSUNDEEP
cssxhtml
gables20
gables20

Reputation: 496

Cannot figure out the next link of pagination

I am working on pagination and its proving a bit challenging. Basically the pagination has a previous link, the pages(1,2,3,4) and a next link. Both the previous and next links have a background image(a directional arrow).

E.g < Previous Page 1|2|3|4 Next >

I was able to get the previous link and directional arrow which is a background image as positioned above but cannot do the same for the next link.

<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;    
}

Upvotes: 0

Views: 162

Answers (2)

Nightfirecat
Nightfirecat

Reputation: 11610

Well, to make your "next" link consistent with your "previous" link, just add padding, and position the background to the top-right instead of the default top-left.

#content div.pagination ul li.pager-next {
    ...
    ...
    background-position: right top;
}
#content div.pagination ul li.pager-next a {
    padding-right: 20px;
}

Upvotes: 1

locrizak
locrizak

Reputation: 12281

most likely your image is not being found because your path is wrong:

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

should be

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

Looks like you misspelled the images directory name

Upvotes: 1

Related Questions