Social Media Buttons Positioning

[Veve]

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.

[Paulie_D]

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.

[zonger]

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…

[Paulie_D]

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.

[Veve]

“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?

[Paulie_D]

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.

[HoughtonA]

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.

[Senff]

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.

[HoughtonA]

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?

[Senff]

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.

[HoughtonA]

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.

[Senff]

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.

[HoughtonA]

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

[Veve]

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/

[Author]

Posts