homepage Welcome to WebmasterWorld Guest from 54.161.191.254
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
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. (&nbsp;) 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.


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved