SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Pagination Questions

    I am trying to add Pagination to a User's Inbox, and have some questions.

    Things would maybe appear like this...
    Code:
    |< < 1, 2, 3,... , 9, 10 > >|

    Questions:

    1.) What is the best way to mark things up?

    <span> ??

    <div> ??

    <p> ??

    Other?


    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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="#"> &laquo; </a></li>
    		<li class="prev"><a title="previous" href="#"> &lsaquo; </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="#"> &rsaquo; </a></li>
    		<li class="last"><a title="end" href="#"> &raquo; </a></li>
    </ul>
    </body>
    </html>

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for the code sample!!


    Say, I'm sorta rusty on my CSS, so some code questions...

    Quote Originally Posted by Paul O'B View Post
    Code:
    .pagination {
    	list-style:none;
    	margin:0;
    	padding:0;
    	text-align:center;
    	font-size:110%;
    }
    The first line removes any default "bullets", right?


    Quote Originally Posted by Paul O'B View Post
    Code:
    .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;
    }
    This makes it so the numbers don't each take up an entire line, and thus will line up side-by-side, right?


    Quote Originally Posted by Paul O'B View Post
    Code:
    <body>
    <ul class="pagination">
    		<li class="start"><a title="start" href="#"> &laquo; </a></li>
    		<li class="prev"><a title="previous" href="#"> &lsaquo; </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="#"> &rsaquo; </a></li>
    		<li class="last"><a title="end" href="#"> &raquo; </a></li>
    </ul>
    </body>
    </html>
    Can you please explain what those cryptic things are following the ampersands?!

    Sincerely,


    Debbie

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,421
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Can you please explain what those cryptic things are following the ampersands?!
    Character entity references for single right-pointing angle quotation mark (&rsaquo;) and single left-pointing angle quotation mark (&lsaquo;) - in other words, right and left arrow symbols.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Those characters are not on the page you linked to...
    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.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,421
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Those characters are not on the page you linked to...
    Yes they are. About 2/3 or 3/4 of the way down the list, just below "Prime".

    angled-quotation.png

    Quote Originally Posted by DoubleDee View Post
    And I'm not getting the names or what they are used for?!
    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.

    Quote Originally Posted by DoubleDee View Post
    Why do you use the term "single" when there are two Less-Than and Greater-Than Symbols?
    I think you're looking at the wrong one. This one - &laquo; - has the two arrows:

    double-angle.png

    hence the other is termed "single" to distinguish it (and has an s in the entity code - &lsaquo;.

    Quote Originally Posted by DoubleDee View Post
    And why do you use the term "quote"?!
    See above.

    Edit:

    Ninja'd by spikeZ

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    The first line removes any default "bullets", right?
    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.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Yes they are. About 2/3 or 3/4 of the way down the list, just below "Prime".
    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

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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...
    Code:
    |< < 1 2 3,...  8 9 > >|

    Quote Originally Posted by Paul O'B View Post
    Technobear already explained those but its best if you view the demo live to see how they look in a browser.
    I tried that link but it didn't do anything when I clicked around...


    I noticed that you need to add an "li" here...
    Code:
    .pagination a:hover { color:red }


    Thanks,


    Debbie

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So there is no way to add Padding between Inline-Block Items?
    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...
    Code:
    |< < 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...
    Code:
    .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.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So there is no way to add Padding between Inline-Block Items?
    You can pad within the inline-block items and you can assign margins on either side.

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes, well spotted that's correct, I added the visited state into the mix and forgot to update the hover.
    Uh-oh, just found a dent in Mr. O'Brien's armour!!



    Debbie

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    How do I make it so that the current page in my navigation thingy has a different style?
    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).

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <li><strong> 2</strong>, </li>
    There are two reasons for this:

    1) It's not a link any more as its the current page and shouldn't go anywhere.

    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.

    2) I used a strong element (which you will have to configure your php to output for the current page) and that means no classes are necessary in that structure as it is the only strong element present and you can apply styling to it easily.

    Code:
    .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.

  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Ralph said you could identify the current page item with a class and use that to style the element differently.
    Right.


    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    <li><strong> 2</strong>, </li>
    Yeah, I didn't understand that the first few go-rounds. I get what you were doing now!


    Quote Originally Posted by Paul O'B View Post
    There are two reasons for this:

    1) It's not a link any more as its the current page and shouldn't go anywhere.

    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.
    So, Paul, how do you *really* feel?!


    Okay, here is my revised navigation...

    Attachment 63343


    Does that meet your approval?

    Sincerely,


    Debbie

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So, Paul, how do you *really* feel?!
    Was it a bit over the top


    Okay, here is my revised navigation...

    Does that meet your approval?
    Yes that looks pretty good

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Was it a bit over the top
    It's just funny to see you get worked up, since you are usually such a "cool cat"!


    Quote Originally Posted by Paul O'B View Post
    Yes that looks pretty good
    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...

    Attachment 63347


    Sincerely,


    Debbie

  20. #20
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Don't display anything in that space if there are no pages....just allocate the space so your display doesn't shift up/down....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •