Centering Twitter & Facebook buttons

Forum Moderators: open

Message Too Old, No Replies

Centering Twitter & Facebook buttons

mike2010

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

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

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

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

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.