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.
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: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:32 pm
Here’s a quick CodePen of a marriage between Absolutes and Floats. It would make adding new buttons easy.
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 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 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.
You must be logged in to reply to this topic.