- This topic is empty.
-
AuthorPosts
-
March 12, 2010 at 4:56 pm #28365leehughesMember
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 #72274TheDocMemberHey 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 #72275leehughesMemberCheers Doc,
I shall give it a whirl :)
March 12, 2010 at 6:24 pm #72298leehughesMemberWell,
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 #72304TheDocMemberDo you also have a div with a class name of "custom" that is wrapping your #bookmarks div?
March 12, 2010 at 7:47 pm #72305leehughesMemberJust changed them to match.. Still no go
March 13, 2010 at 1:46 am #72322xhtmlitMemberHi,
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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.