Grow your CSS skills. Land your dream job.

How to float social icons on a page

  • # March 12, 2010 at 4:56 pm

    Hi,

    Am trying to figure out how to float a few icons on the left side of the page but keep it always centered so if I had a long page were you have to scroll down a lot the icons will still be centered in on the left.

    Can anyone point me in the right direction please?

    Thanks

    # March 12, 2010 at 5:34 pm

    Hey Lee!

    I think I understand what you’re talking about.

    You’ll want to look into "position: fixed;".

    Quick search:

    http://davidwalsh.name/css-fixed-position

    I’m sure there a bajillion more links.

    # March 12, 2010 at 5:41 pm

    Cheers Doc,

    I shall give it a whirl :)

    # March 12, 2010 at 6:24 pm

    Well,

    I tried it out..

    But my crap development knowledge showed..

    I couldn’t work it out..

    I did however, find a photo of what am trying to do http://fourblogger.com/wp-content/uploa … -icons.jpg

    And I also found a guide http://fourblogger.com/how-to-add-float … sis-theme/

    But it’s on the thesis theme and thus confuses me further..

    So this is my html

    Code:

    And my css

    Code:
    .custom #bookmarks {background: width: 3.1em; position: fixed; top: 35%; right: 0.55%;}
    .custom #bookmarks a {display: block; text-indent: -9999px; height: 3.1em;}
    .custom #bookmarks #twitter {background: url(‘http://www.princessgowns.co.uk/wp-content/uploads/2010/03/twitter.png’)}

    Not sure if you can use code as thesis but you can see where my logic came from.. :roll:

    # March 12, 2010 at 7:42 pm

    Do you also have a div with a class name of "custom" that is wrapping your #bookmarks div?

    # March 12, 2010 at 7:47 pm

    Just changed them to match.. Still no go

    # March 13, 2010 at 1:46 am

    Hi,

    Just wanted to find out what is happening with the code you have using currently. See, using your code, text-indent on my end will make the text go off page. Removing that, actually positioned it fixed. Also within the .custom #bookmarks background was opened not closed, did that of course :) Here’s my stuff, if that helps let us know;

    Code:
    .custom {width:860px;border:1px solid #000;overflow:hidden;}
    .custom #bookmarks {background:; width: 3.1em; position: fixed; top: 35%; right: 0.55%;}
    .custom #bookmarks a {display: block; height: 3.1em;}
    .custom #bookmarks #twitter {background: url(‘http://www.princessgowns.co.uk/wp-content/uploads/2010/03/twitter.png’)}

    Thank you,

    AJ

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

You must be logged in to reply to this topic.

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