Grow your CSS skills. Land your dream job.

Need help with button placement

  • # October 29, 2012 at 4:03 pm

    At the bottom of this post I’d like to get the 2 social buttons to line up correctly, but not sure how. I’m using a child theme, so hopefully someone can suggest some css I can put in there. Thanks so much!

    # October 29, 2012 at 4:31 pm

    Link please.

    # October 29, 2012 at 4:41 pm

    @senff
    Oh sorry! [Here's the link](http://rickwsmith.com/blog/noahs-dad-twitter/ “noah’s dad”). I’d really like to use the tall buttons in that call to action box at the bottom of the post if posable. But I change it in the plug in, it changes it up top as well, which doesn’t look good. Any thoughts on how I could do that?

    # October 31, 2012 at 1:37 pm

    I would add this css to your current style sheet or classes in the style sheet:

    .socialize-buttons{
    position:relative;
    }

    .socialize-button{
    position: absolute;
    top: 50px;
    }

    that will line up both the buttons but they will be on top of each other. To move one of them to the right a bit, I’d add another bit of css like:

    .socialize-button:last{
    left: 100px;
    }

    # October 31, 2012 at 1:38 pm

    By giving the surrounding div a position of relative, it will let you place the other elements freely inside it – if they have position: **absolute**. The next bit just says place them 50px from the top, then that last bit just says “of the two you just placed, place the last one of them 100px from the left hand edge.”

    # October 31, 2012 at 9:23 pm

    @sheepysheep60 Thanks for your help, and for the incredible explanation. It looks like it still isn’t lining up correctly. Any thoughts?

    # November 1, 2012 at 6:33 am

    No worries, sorry it didn’t work out. I think :last is only meant for list elements, my bad.

    .socialize-buttons {
    position: absolute;
    top: 56px;
    }

    .socialize-button {
    position: relative;
    float: left;
    width: 100px;
    }

    .socialize-containter {
    position: relative;
    }

    Try the above, so this time we position the socialize buttons absolutely – under the text – then we give the individual buttons widths and use float to make them sit next to each other.

    # November 1, 2012 at 11:48 am

    @sheepysheep60 Thanks! It looks great. Do you know to use use the vertical buttons , and put them on to the left of the content, where they were? I think that would actually look better.

    So basically keep everything as it was, but use vertical buttons instead of horizontal ones? Thanks.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".