I am trying to setup a arrow navigation where I have a next and previous button. Needs to be supported in IE 7 and up.
For the next I want the background image to show to the right of the next text. Then of the previous button I want the text to show to the left side of the previous text. I thought this would be easy but I just s开发者_开发知识库pent 2 hours on it.
Anyone can help with this before I go crazy.
<span class="next">
<a href="#">Next Month</a>
August
</span>
<span class="prev">
<a href="#">Previous Month</a>
June
</span>
In my css I have this for the left button and it works great.
.prev a, .next a {
background: url("sprite.png") no-repeat scroll -200px -5px transparent;
display: inline-block;
height: 25px;
text-decoration: none;
text-indent: -9999em;
}
.prev {
float: left;
}
.next {
float: right;
}
.next a {
background-position: -200px -18px;
}
@chapsterj; first span
is an inline
element so, define display:block
in his css . Second there is not need for text-indent
& Third you can do it without extra span tag . Do like this
<a href="#" class="next">Next Month</a>
<a href="#" class="prev">Previous Month</a>
css:
a.prev, a.next{
background: url("sprite.png") no-repeat scroll -200px -5px transparent;
display:block;
height: 25px;
text-decoration: none;
}
.prev {
float: left;
padding-right:40px;
}
.next{
background-position: -200px -18px;
float: right;
padding-left:40px;
}
精彩评论