Jump to content

Rounded Pagination


jamesbrauman

Recommended Posts

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:

pagestc8.png

 

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.

offpagebackiu1.gif

pageofflefths2.gif

pageoffrightaj9.gif

onpagebackap4.gif

pageonleftuk4.gif

pageonrightmb4.gif

 

 

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.

Link to comment
https://forums.phpfreaks.com/topic/129867-rounded-pagination/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.