Rounded Pagination

[jamesbrauman]

Hello, I have spent the last three hours pulling my hair out over this, I cant seem to get it to work.

 

I'm basically copying the pagination from this site: http://www.pixel2life.com. I liked the rounded corners and thought I would attempt it.

 

This is a screenshot of what I am trying to acheive:

 

I do not want to set a fixed width for these buttons, I want the text inside them to define how long they will be (the "512" button is longer than the "1" button).

 

I decided that it was logical to break that image up into 6 parts, with three for each button - the left rounded side, the right rounded side, and a 1px slice of the background which can be repeated horizontally.

 

 

And I thought the HTML markup would be something like this (note that I want the buttons displayed inline, and that "onpage" refers to the green button and "offpage" refers to the grey button):

<span class="offpage"><span class="left"></span><span class="main">PAGENUMBERHERE</span><span class="right"></span>
<span class="onpage"><span class="left"></span><span class="main">PAGENUMBERHERE</span><span class="right"></span>

 

I can't seem to get it to WORK though. Please help me, I am in dire need!  ???

 

Thanks.

[jamesbrauman]

Don't worry - I found http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

[haku]

You only need two images for this - a left and a right. Then you can use the sliding doors technique.