We help IT Professionals succeed at work.

pagination styling

davidlars99
davidlars99 asked
on
Medium Priority
450 Views
Last Modified: 2012-05-06
Hi,

All of the pagination styles I've come across are the same. The styling I'm looking for is almost as same as http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html with only minor change.

This is what I'm looking for:

I want the [Back] button to be positioned at the far left, and the [Next] button at the far right, but [numbers] to remain centered.

[Back]          [1][2][3]4[5][6][7]          [Next]


Cheers,
David
Comment
Watch Question

Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
Hello,

So, if we say that we are using the flickr like pagination example from that tutorial... you could probably just add this to the css:

#pagination-flickr .previous-off {
margin-right:200px
}
#pagination-flickr .next-off {
display:inline
margin-left:200px
}

Thanks
Steggs

Author

Commented:
Is there any way not to use fixed margins?
Web Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
Sure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>pagination</title>
<style type="text/css">
ul{border:0; margin:0; padding:0;text-align:center;width:400px}
 
#pagination-flickr li{
border:0; margin:0; padding:0;
display:inline;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
font-weight:bold
}
#pagination-flickr .previous-off,
#pagination-flickr .previous {
float:left;
padding:5px 4px;
}
#pagination-flickr .next-off,
#pagination-flickr .next {
float:right;
padding:5px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}
 </style>
 </head>
 <body>
 <ul id="pagination-flickr">
<li class="previous-off">« Previous</li>
<li class="next"><a href="?page=2">Next »</a></li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
</ul> 
</body>
</html>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Thank you! What's the difference? What did you do?
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
No problem. I'll let you work it out.. its the best way to learn
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.