PDA

View Full Version : Facebook and Twitter buttons on same line?



Denys
Dec 18th, 2011, 04:07 PM
At the moment they are on two separate lines, but I need them both on the same line. I have just been given the code for the site, didn't design it myself and so have litttle idea as to what I'm doing! Apparently need CSS but not sure where to start! Help is much appreciated.


<p>
<div class="fb-like" data-href="https://www.facebook.com/pages/Which-Boarding-School/192810007476904" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true">
<a href="https://twitter.com/UKBoardingHelp" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @UKBoardingHelp</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></p>

http://www.which-boarding-school.com/contact-us.html

Denys

theTortoise
Dec 18th, 2011, 06:19 PM
Play with some inline styles, your issues is mainly, widths of the elements, and floating...so try something like below...(I took code right from the page...)


<p>
<div class="fb-like" data-href="https://www.facebook.com/pages/Which-Boarding-School/192810007476904" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" style=" width: 200px; clear: none; float: left; "></div>
</p>
<p style="width: 200px; float: left; clear: none;">
<a href="https://twitter.com/UKBoardingHelp" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @UKBoardingHelp</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>

Denys
Dec 18th, 2011, 06:40 PM
Play with some inline styles, your issues is mainly, widths of the elements, and floating...so try something like below...(I took code right from the page...)


<p>
<div class="fb-like" data-href="https://www.facebook.com/pages/Which-Boarding-School/192810007476904" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" style=" width: 200px; clear: none; float: left; "></div>
</p>
<p style="width: 200px; float: left; clear: none;">
<a href="https://twitter.com/UKBoardingHelp" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @UKBoardingHelp</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>


Fantastic! Worked on the homepage as you can see and will now apply to the rest of the pages! Rep and thanks added.

EDIT: Just noticed that you can't hover over the button and click it in Chrome but you can on IE? ANy ideas?