0

I have a previous and a next button for a php pagination script, which both fall under the class paginate.

.paginate {
   font-family:Arial, Helvetica, sans-serif;
   padding: 3px;
   width:400px;
}

.paginate a {
   padding:2px 5px 2px 5px;
   margin:2px;
   text-decoration:none;
   color: #fff;
   width: 180px;
}

so i have given them both their own individual classes Next and previous

Next

.next {
   background: url("../images/more.fw.png") no-repeat;
   height: 87px;
   width:128px;
   padding:10px;
   margin:50px;
   font-family:Arial;
   font-size:24px;
   color:#fff;
   position:fixed;
   top:585px;
   right:470px;
}

Previous

.previous {
   background: url("../images/previous.fw.png") no-repeat;
   height: 87px;
   width:128px;
   padding:10px;
   margin:50px;
   font-family:Arial;
   font-size:24px;
   color:#fff;
   position:fixed;
   top:585px;
   right:620px;
}

As you can see in the link below these buttons fit perfectly side by side when set against the top of the page, however what i am trying to do is get the buttons to sit say 20 px below the section above. However if i change ti from top 558px, what happens is the buttons sit at different heights and will not sit next to one another.

Any ideas would be appreciated.

Thanks

2 Answers 2

0

you can set the button by position:absolute; on both the .next and .previous so that the potion of button wont change

0

You have the style set to position: fixed, so they wont move when the screen scrolls - is this what you want?

.paginate {
    position: relative;
    ...

.next {
    position: absolute;
    display: block;
    ...

Now set your button top and right all relative to the paginate container

6
  • Thanks when i remove the position fixed, the buttons end up looking like this: qrrw.net/E Nov 8, 2012 at 8:55
  • Your html is pretty broken there - you have the next button inside the previous button!
    – trapper
    Nov 8, 2012 at 9:00
  • Thanks no that doesn't work, nothing seems to does apart what i put the first time qrrw.net/E i think the problem must be because both buttons are in the same class Nov 8, 2012 at 9:09
  • Mate nothing is going to work properly until you fix your html up, you still have the next button div inside the previous button div. How is that going to work?
    – trapper
    Nov 8, 2012 at 9:11
  • Look at the state of it: validator.w3.org/…
    – trapper
    Nov 8, 2012 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.