I am trying to add Pagination to a User’s Inbox, and have some questions.
Things would maybe appear like this…
|< < 1, 2, 3,... , 9, 10 > >|
Questions:
1.) What is the best way to mark things up?
[INDENT]<span> ??
<div> ??
<p> ??
Other?
[/INDENT]
2.) What can I use for the indicators: Go-To-First, Previous, Next, Go-To-Last
3.) This is more a programming question, but are there any good and easy-to-follow tutorials out their on Pagination which might help me out?
Sincerely,
Debbie
HI,
I tend to do pagination in lists as you have a list of pages and it makes the html easier to manage and see what’s what.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.pagination {
list-style:none;
margin:0;
padding:0;
text-align:center;
font-size:110%;
}
.pagination li {
display:inline-block;
*display:inline;/* ie7/6 imnline block support - remove if not supported*/
*zoom:1.0;/* ie7/6 inline block support - remove if not supported*/
vertical-align:middle;
}
.pagination li a, .pagination li a:visited {
color:#000;
text-decoration:none;
}
.pagination strong { color:red; }
.pagination a:hover { color:red }
</style>
</head>
<body>
<ul class="pagination">
<li class="start"><a title="start" href="#"> « </a></li>
<li class="prev"><a title="previous" href="#"> ‹ </a></li>
<li><a href="#"> 1</a>, </li>
<li><strong> 2</strong>, </li>
<li><a href="#"> 3</a>, </li>
<li><a href="#"> ... </a>, </li>
<li><a href="#"> 9</a>, </li>
<li><a href="#"> 10</a>, </li>
<li class="next"><a title="next" href="#"> › </a></li>
<li class="last"><a title="end" href="#"> » </a></li>
</ul>
</body>
</html>
Paul,
Thanks for the code sample!! :tup:
Say, I’m sorta rusty on my CSS, so some code questions…
The first line removes any default “bullets”, right?
This makes it so the numbers don’t each take up an entire line, and thus will line up side-by-side, right?
Can you please explain what those cryptic things are following the ampersands?!
Sincerely,
Debbie
Character entity references for single right-pointing angle quotation mark (›) and single left-pointing angle quotation mark (‹) - in other words, right and left arrow symbols.
Those characters are not on the page you linked to…
And I’m not getting the names or what they are used for?!
Why do you use the term “single” when there are two Less-Than and Greater-Than Symbols?
And why do you use the term “quote”?!
:-/
Debbie
They are on there, search for them without the & sign.
And I’m not getting the names or what they are used for?!
Just simple arrows for pointing to stuff.
rIGHT sINGLE aRROW quoTE or to give it it’s proper name - guillemet See http://en.wikipedia.org/wiki/Guillemet
Why do you use the term “single” when there are two Less-Than and Greater-Than Symbols?
Because there are 2 variations, one single arrow and one double arrow
And why do you use the term “quote”?!
Language terminology - see above.
Yes they are. 
About 2/3 or 3/4 of the way down the list, just below “Prime”.
Some languages use them for quotation marks, rather than " or ', hence angle quotation mark. Here, of course, they’re not being used as quotation marks, but as convenient arrow symbols for your previous or following pages.
I think you’re looking at the wrong one. This one - « - has the two arrows:
hence the other is termed “single” to distinguish it (and has an s in the entity code - ‹.
See above.
Ninja’d by spikeZ
list-style:none removes the bullets and margin and padding remove the space that the bullet would have occupied and varies between browsers so needs to be set explicitly.
This makes it so the numbers don’t each take up an entire line, and thus will line up side-by-side, right?
display:inline-block is a little like floating but different :). It allows for block elements to sit inline (inline-block) and thus stack horizontally. The benefits of inline-block is that you can centre the elements (unlike floats) and also that when elements wrap they won’t snag if heights vary. The ‘con’ with inline-block is that you get a small space between blocks just like the space between words which in most cases is fine.
Can you please explain what those cryptic things are following the ampersands?!
Technobear already explained those but its best if you view the demo live to see how they look in a browser.
Oh my old eyes!!!
Okay SpikeZ and TechnoBear, I get it now!!! 
Thanks for helping to catch me up with the times and the rest of the world’s languages!! 
Sincerely,
Debbie
So there is no way to add Padding between Inline-Block Items?
What could I do if I wanted to adjust the spacing between numbers like this…
|< < 1 2 3,... 8 9 > >|
I tried that link but it didn’t do anything when I clicked around…
I noticed that you need to add an “li” here…
.pagination a:hover { color:red }
Thanks,
Debbie
Maybe I wasn’t clear but you can add margins to inline blocks to move them apart (or add padding inside as per usual) but the elements will never butt up close to each other with no gap unless you jump through a few hoops; you can move them as far apart as you like though. As I said this is rarely an issue unless you had bordered columns that you want to hug close and there are methods to do this which I won;t go into detail here as it is not required.
What could I do if I wanted to adjust the spacing between numbers like this…
|< < 1 2 3,... 8 9 > >|
Just add padding to the anchor or the list. It depends if you want a bigger target area for the anchor or greater separation between anchors (or even both).
I tried that link but it didn’t do anything when I clicked around…
You lost me there
It’s just a demo of how to style the pagination. Nothing is going to happen when you click anything as the links go nowhere; that’s not a job for CSS as such.
I noticed that you need to add an “li” here…
.pagination a:hover { color:red }
Yes, well spotted that’s correct, I added the visited state into the mix and forgot to update the hover.
You can pad within the inline-block items and you can assign margins on either side.
Uh-oh, just found a dent in Mr. O’Brien’s armour!! 
Debbie
Paul,
How do I make it so that the current page in my navigation thingy has a different style?
For example, I was thinking of making the Page # for the Current Page have a background around the number and maybe reverse font-color?!
Sincerely,
Debbie
That’s more of a PHP thing. You could attach some kind of “current” class to the current page number, or some systems remove the link on the current page number so that it’s not clickable and is not styled like the other page numbers (which are still links).
Hi,
As Ralph said you could identify the current page item with a class and use that to style the element differently.
However, if you look at the code I already gave then you will see that the current page is not an anchor; I used a strong element.
<li><strong> 2</strong>, </li>
There are two reasons for this:
The worst thing you can do to a user is make them wait while you load the same page again when they have clicked the item in error. This not only makes the user feel dumb but sometimes also confuses them as links are supposed to go somewhere. It’s a pet hate of mine and has been one of the top usability mistakes since year dot. A link should always go somewhere; that’s how the web was built.
.pagination strong {
color:#fff;
background:#000;
padding:0 10px;
margin:0 1px;
}
If you use includes for your menu and can’t convert the current item to a strong element then you will instead need to add a class to the list or the anchor and apply those styles above.
Right.
Yeah, I didn’t understand that the first few go-rounds. I get what you were doing now!
So, Paul, how do you really feel?!
Okay, here is my revised navigation…
Does that meet your approval?
Sincerely,
Debbie
Was it a bit over the top
Okay, here is my revised navigation…
Does that meet your approval?
Yes that looks pretty good
It’s just funny to see you get worked up, since you are usually such a “cool cat”!
Anything I could do to improve things?
By the way, what should I do if there is just one page?
Right now my code yields this, and I’m thinking this maybe looks a bit off…
Sincerely,
Debbie
Don’t display anything in that space if there are no pages…just allocate the space so your display doesn’t shift up/down…