jamesbrauman Posted October 23, 2008 Share Posted October 23, 2008 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. Link to comment https://forums.phpfreaks.com/topic/129867-rounded-pagination/ Share on other sites More sharing options...
jamesbrauman Posted October 24, 2008 Author Share Posted October 24, 2008 Don't worry - I found http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html Link to comment https://forums.phpfreaks.com/topic/129867-rounded-pagination/#findComment-673298 Share on other sites More sharing options...
haku Posted October 24, 2008 Share Posted October 24, 2008 You only need two images for this - a left and a right. Then you can use the sliding doors technique. Link to comment https://forums.phpfreaks.com/topic/129867-rounded-pagination/#findComment-673495 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.