| Centering Twitter & Facebook buttons
|
mike2010
msg:4326852 | 12:31 pm on Jun 16, 2011 (gmt 0) |
I'm having a pain in the arse time either centering the Twitter & Facebook buttons next to each other.... Or even putting them on separate lines. It seems like the Twitter "follow" button never wants to Center to matter what I do. (it always stays left of center)
I've tried <div align="center"> , I've tried centering it in a <table> . And i've even messed around with the space command. ( ) all to no avail.
any other ideas ? Even though I do all my publishing through direct html, maybe I temporarily need a web publishing software to squeeze them together ?
I typically hate those things though, as usually when you change 1 little thing, it completely changes the html for the entire page...and adds unnecessary HTML.
any other ideas or suggestions are appreciated.
|
rocknbil
msg:4326964 | 5:23 pm on Jun 16, 2011 (gmt 0) |
1. Assign a WIDTH to the container for the buttons.
2. Manhandle the containers as you will. :-) You can use align:center, but with a width the exact size of the buttons, you can use margin: auto on block elements.
Assuming they are 37px X 36px for example, you should be able to do
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#social { width: 78px; margin: auto; } /* widths + margin */
#fb, #twitter, #fb a, #twitter a {
width: 36px;
height: 37px;
display: block;
border: none;
cursor: pointer;
outline: none;
text-indent: -50000px;
}
#fb, #twitter { float: left; }
#twitter { margin-left: 6px; }
#twitter a { background: transparent url(images/twitter.gif) left top no-repeat; }
#fb a { background: transparent url(images/facebook.gif) left top no-repeat; }
#fb a:hover, #twitter a:hover { background-position: bottom left; }
</style>
</head>
<body>
<div id="social">
<p id="fb"><a href="htt p://www.facebook.com/home.php#!/your-id" target="_blank">Find us on FaceBook</a></p>
<p id="twitter"><a href="htt p://twitter.com/#!/your-id" target="_blank">Follow us on Twitter</a></p>
</div>
</body>
</html>
If you're using Javascript, the concept is the same . . . center a container somehow and swap out the anchors for JS. [edited by: tedster at 10:32 pm (utc) on Jun 16, 2011]
[edit reason] fix side-scroll [/edit]
|
mike2010
msg:4327004 | 6:26 pm on Jun 16, 2011 (gmt 0) |
hmm, I appreciate the effort but mine's a little different.
I'm using the following 2 buttons (I guess I should of posted this initially) The Facebook Like is using xfbml and the twitter one is a script.
Also, my CSS for the page is located in another directory. I guess I could add everything there, instead of inbetween </head> ?
Facebook Like - <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/pages/mypage" ref="home" send="true" layout="button_count" width="200" show_faces="false" font=""></fb:like>
Twitter Follow - <a href="http://twitter.com/mytwitter" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#00AEFF" data-show-count="false">Follow @mytwitter</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
(not my actual facebook or twitter account pages ..but the buttons will still display)
Either having them center together next to each other on 1 line...or center above & below each other would satisfy me greatly at this point.
|
rocknbil
msg:4327479 | 6:17 pm on Jun 17, 2011 (gmt 0) |
The concept is the same. Wrap the twitter one in a block container (or display:block if it's an inline element,) assign widths to them, float them left, then put them in a parent container that has margin: auto. ) Use a paragraph or some other semantic container to avoid div-itis.
|
mike2010
msg:4327517 | 7:07 pm on Jun 17, 2011 (gmt 0) |
bah, i'm still confused. there's too many script & div elements within the original coding.. I feel like if I screw with those, it'll screw with it's functionality.
|
|
|
