Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to float social icons on a page

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #28365
    leehughes
    Member

    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

    #72274
    TheDoc
    Member

    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.

    #72275
    leehughes
    Member

    Cheers Doc,

    I shall give it a whirl :)

    #72298
    leehughes
    Member

    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:

    #72304
    TheDoc
    Member

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

    #72305
    leehughes
    Member

    Just changed them to match.. Still no go

    #72322
    xhtmlit
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.