CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
BlazeK
BlazeK

Reputation: 41

Image rotate pagination question

trying to get the pagination inside the main area display to look a little better. Where it has the pagination, i would like the active states to be formatted to fit perfectly inside the appropriate boxes without the numbers showing but having some difficulties.

you can view the image rotate pagination issue here: http://obliqueinteractive.com/demo/oblique/

Here is the code im working with for the pagination:

HTML

<div class="paging">
    <a href="#" rel="1">1</a>
    <a href="#" rel="2">2</a>
    <a href="#" rel="3">3</a>
</div>

CSS

.paging {
 position: absolute;
 bottom: 10px; 
 left: 372px;
 width: 189px; 
 height:41px;
 z-index: 100; /*--Assures the paging stays on the top layer--*/
 text-align: center;
 line-height: 40px;
 background: url(../images/paging_bg2.png) no-repeat;
 display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
 padding: 5px;
 text-decoration: none;
 color: #fff;

}
.paging a.active {
 background-image: url(../images/active.png) ;
 width:12px;
 height:11px;
}
.paging a:hover {
 background-image: url(../images/active.png) ;
}

Upvotes: 0

Views: 624

Answers (1)

Adam
Adam

Reputation: 873

.paging a { background-repeat:no-repeat; background-position: x-offset y-offset; }

change offsets in pixels to fit Your layout and change content of to:

$nbsp;

Upvotes: 1

Related Questions