Grow your CSS skills. Land your dream job.

Social Media Buttons Positioning

  • # September 24, 2012 at 1:09 pm

    How do you position social media buttons on the side of your content div?
    Like here: http://adidasgolf.eu/home.aspx

    Absolute positioning? But then the content div has to be positioned absolutely as well right? This is what I have so far… without the social media buttons.

    http://www.swiftgeckotech.com/golf01.html

    Thanks.

    # September 24, 2012 at 1:50 pm

    How you position them will depend on your overall design.

    Absolute positioning works on the Adidas site you linked but something else might be more appropriate depending on what your site is supposed to look like.

    Do you have a mock-up of the finished design…you should, you know.

    # September 24, 2012 at 1:53 pm

    It is kinda hard to debug with your images not even loading…..
    Please try to fix your link first. And like Paulie said, how you positioning your images is depend on your overall look…

    # September 24, 2012 at 1:59 pm

    I also have to say that in common with most new coders you have used absolute positioning and margins to put everything in place.

    More often than not, you don’t need to do that. Certain elements are automatically 100% wide and the next one will fall into place just because it’s the next one in the HTML.

    If you need to tweak the position then that’s where margins/padding can come into play.

    I think you need to learn a little bit more about floats and how they work.

    # September 24, 2012 at 2:19 pm

    “I also have to say that in common with most new coders you have used absolute positioning and margins to put everything in place.”

    I cleaned the page from too many margins and fixed the position of the social media buttons. How does it look like now?

    # September 24, 2012 at 2:25 pm

    It works….it’s not the way I would do it but it’s not my site.

    I would say that all the social media ‘bits’ should be the same width for some visual balance.

    # September 24, 2012 at 2:32 pm

    Here’s a quick CodePen of a marriage between Absolutes and Floats. It would make adding new buttons easy.

    http://codepen.io/anon/pen/Iahie

    This method does assume that every button is the same width, though. I agree with Paulie_D that they certainly should be.

    # September 24, 2012 at 2:40 pm

    I strongly discourage having positioning (relative or absolute) on social buttons (or divs wrapping these buttons), especially the Facebook Like button. That gave me such trouble at times, when the overlay that you see when you click a Like button turned semi-transparent at random times and such.

    Try to avoid that if you can.

    # September 24, 2012 at 2:50 pm

    I agree that often-times position:ing elements can be a bad idea (and there are many different ways to do that). What problem are you referring to with the semi-transparent issue?

    # September 24, 2012 at 3:02 pm

    My issue back then was when I’d click LIKE, it would show the overlay of a box (with my profile pic, “Add a comment” box, URL, page description and “Post to Facebook”/”Close” buttons), and it would be at 100% opacity.
    But if there would be a link under that box, and I would hover over it (through the overlay box), the opacity of the box would go to 50% or so.

    Reason was because the whole block with all the social buttons had a position:absolute (or relative, I don’t remember), and removing any positioning solved the issue.

    # September 24, 2012 at 4:11 pm

    I’ve never had that issue, but unless I’m misunderstanding you, it’s a z-index issue? Absolutely positioned elements automatically get a higher index, so that might be the problem.

    # September 24, 2012 at 4:19 pm

    Giving the box a higher Z-index didn’t work, giving the underlying div a higher Z-index didn’t work either. I just figured it would be better to avoid the positioning altogether.

    # September 25, 2012 at 2:06 am

    Weird! I wish there was a way for me to look at that.

    # September 25, 2012 at 4:32 am

    Thanks HoughtonA. That’s neat solution.
    And I know what you are talking about Senff with the like button. I saw this problem on other sites. You can always use different type of like button. For example the ‘button_count’ and don’t allow showing faces.

    https://developers.facebook.com/docs/reference/plugins/like/

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

You must be logged in to reply to this topic.

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