Aligning 3 social icons spaced out equally over a background image all wrapped in a div

Question

Hello everyone!

I have a container div tag which wraps an image named "tray" which provides a background to 3 social networking icons spaced out equally along the tray.

I would also love to have the icons hover when I rollover them, but I am having some problems positioning it in another one of my divs. I just want it to be aligned to the left, that's all, and nothing seems to work!

I apologize, but when I insert the code into this question dialog box, it appears to not work, so you can check out the code at:

http://www.marioplanet.com/

I have the raise on rollover effect working, just not the alignment with my other page, as you can see when you visit my site, it's kind of a mess! :)

I appreciate any suggestions, thanks!

BOSS

Answer 1

So what you have going on is that you are trying to use position absolute when what you want is position relative. Remove the position absolute and other positioning from your containing div and make it have margin top the same as your pop up distance. This will give you the space for the popup action. Then make your "follow us on" image position relative and make top:-30px this will cause the image to position as normal but then you bump it up 30 pixels to cover the follow images.