?
Solved

pagination styling

Posted on 2009-02-09
5
Medium Priority
?
432 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
0
Comment
Question by:davidlars99
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 23593859
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
0
 
LVL 13

Author Comment

by:davidlars99
ID: 23603256
Is there any way not to use fixed margins?
0
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 2000 total points
ID: 23603808
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

0
 
LVL 13

Author Comment

by:davidlars99
ID: 23604503
Thank you! What's the difference? What did you do?
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 23604525
No problem. I'll let you work it out.. its the best way to learn
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month15 days, 21 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question