Next Previous button using CSS sprite

Question

I am trying to create a Next/ Previous button like in the image below, to navigate back and forth within some contents. I have the background image for the buttons here: http://i43.tinypic.com/25alqv7.png

I have tried the following code but the next button is not showing up.

Could you please show me how to display the buttons just like in the image above?

You can see my code live here: http://jsfiddle.net/kLqja/

The HTML Code:

<div style="float:right;">
    <span id="button-previous"></span> <span id="button-next"></span>
</div>  

CSS code:

#button-next {
width: 25px;   
left:0px;
display: block;
background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;

}

#button-previous {
width: 25px;
height: 25px;
left:25px;  
display: block;
background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;
}

Answer 1

You forgot to add height to the #button-next.

And if you want to use left, you have to use position:relative/absolute/fixed to make it work.

JSFiddle

Answer 2

#button-next {
    width: 25px;
    height: 25px;
    left:0px;
    display: block;
    background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll -29px 0px transparent;
}

1. The height of element is missing

2. For the CSS sprite button, you should modify the background-position to fit the image (-29px)

http://jsfiddle.net/uqBdS/

Answer 3

Use This CSS DEMO HERE

#button-next {
    width: 25px;   
    left:0px;
    height:25px;
    display: block;
    background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll -29px 0px transparent;  /*changed background position to -29px*/

}

#button-previous {
    width: 25px;
    height: 25px;  /*Added Height*/
    left:25px;  
    display: block;
    background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;
      z-index: 10;
    cursor: pointer;
      opacity: 0.8;
}

Answer 4

Like this

demo

css

#button-next {
    width: 25px;   
    left:0px;
    display: block;
    background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;
    float:left;

    height: 25px;// `add height;` you `missing height`

}

#button-previous {
    width: 25px;
    height: 25px;
    left:25px;  
    display: block;
    background: url("http://i43.tinypic.com/25alqv7.png") no-repeat scroll 0px 0px transparent;

    z-index: 10;
    cursor: pointer;

    opacity: 0.8;


     float:left;
}
.pull-right{
    float:right;
}

html

<div class="pull-right">
    <span id="button-previous"></span> <span id="button-next"></span>
</div>