NextPage (pagination) and the Like and Share buttons

  • Author
    Posts
  • #1473464

    windwhistle
    Member

    I recently had occasion to use NextPage (pagination) for the first time. It worked nicely and was, I thought, the perfect solution for the presentation I had in mind. But then I saw that the resulting page numbers fall below the Like and share buttons and their full-width horizontal rules. It seems to me those page numbers should be contiguous with the material they relate to. Is there any way to use CSS to make the page numbers appear above the Like and share buttons?

    See what I’m talking about here: http://piedtype.com/2013/10/05/tom-clancy-boy-writer-part-3/

    The blog I need help with is piedtype.com.

    #1473614

    Hi there, the following will do it, but with a caveat. Position: relative has to be used to move the next page navigation up above the likes and sharing and that positions it relative to where it was. If the likes end up going to two rows, the alignment of the next page nav will be off. The first rule below relocates the page nav, and the second bit makes room for it above the sharing/like stuff. See what you think.

    .page-navigation {
        position: relative;
        top: -190px;
    }
    
    div.sharedaddy {
        margin-top: 30px;
    }
    #1473631

    windwhistle
    Member

    Cool! Never occurred to me to use position: relative. Although it makes the page numbers overlap the bottom edge of the images, I find that better than having the numbers fall below all the other stuff. I don’t recall ever seeing Like avatars wrap to a second line; I’ve just assumed they fill to the end of one line and then drop off, with any new ones added to the front of the line. In any case, thanks so much for this solution!!

    #1473653

    Rats, sorry for not checking in Chrome. Change the top margin value in the second rule to 70px. That will end up giving double the white space in Firefox, but fix the issue in Chrome and Safari.

    #1473662

    windwhistle
    Member

    Oh, not your fault. I hadn’t even thought to mention I use Chrome and I didn’t check the result in Firefox. My bad. Forgetting the basics. The 70px fixed the overlap and I’m delighted. (I spent days getting those posts together.) Thanks again!!

    #1473669

    You are most welcome, and no problem on mentioning the browser. I should have checked in all of them anyway. It used to be that most everything that worked in Firefox worked in Safari and Chrome as well, but lately there seems to more divergence.

    #1473670

    windwhistle
    Member

    If they were all alike, there’d be no challenge for programmers. Where’s the fun in that? ;)

    #1473671

    So true. Look how much fun we all had with IE5, 6, 7 and 8? :)

    #1473729

    windwhistle
    Member

    Hmm, I just discovered that these changes affect the alignment of the resulting page numbers on category pages (eg, http://piedtype.com/category/mediacomm/ ). I didn’t realize until today that the page numbers would appear there. I don’t suppose you have more CSS magic to resolve this … ? If not, it’s no big deal.

    #1473735

    Sorry about that. Let’s modify those two rules as below, and add the third rule, just to make sure.

    .single .page-navigation {
        position: relative;
        top: -190px;
    }
    .single div.sharedaddy {
        margin-top: 70px;
    }
    .archive .page-navigation {
        position: static;
    }
    #1473736

    windwhistle
    Member

    Beautiful! You’re a wizard. Thanks!!

    #1473737

    You are welcome.

The topic ‘NextPage (pagination) and the Like and Share buttons’ is closed to new replies.