Solved: Facebook and Twitter buttons on same line?

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Denys

Thread Starter
Joined
Nov 25, 2009
Messages
145
Code:
<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"></div>
<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>
At the moment they are on two separate lines, but I need them both on the same line with a little space between them. Could someone please do this for me?

Much appreciated,

Denys
 

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,316
This may work but without seeing the rest of the code and the CSS it is just an educated guess

Code:
<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>
If it doesn't then it will need some more work and would need a url as a minimum to offer any more advice.
 

Denys

Thread Starter
Joined
Nov 25, 2009
Messages
145
This may work but without seeing the rest of the code and the CSS it is just an educated guess

Code:
<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>
If it doesn't then it will need some more work and would need a url as a minimum to offer any more advice.
Thank you very much for your reply. Unfortunately it was still on two lines. Here is the url: www.which-boarding-school.com.
I have left it so that only the twitter button shows otherwise the quotes are cut off but I will keep experimenting with your suggestions.

Thanks again,

Denys
 

Ent

Josiah
Trusted Advisor
Joined
Apr 11, 2009
Messages
5,467
I would suggest that you need to use a bit of CSS to do that.

Specify the width of the two sections such that they don't fill the screen space available.
Then set them both to float left.
So long as there is space for the Twitter section to the right of the Facebook section they should collapse onto the single line.
 

Denys

Thread Starter
Joined
Nov 25, 2009
Messages
145
Hi there, I have never done proper website designing before and it's all quite new to me. I didn't actually design the site myself and have just been handed the finished product. I have located the CSS files but after researching online I am completely lost as to what to do!

Help is much appreciated!

Thanks.
 

Denys

Thread Starter
Joined
Nov 25, 2009
Messages
145
Sorry if this asking a lot but I really would like to have this done for my parents' website!
 

Ent

Josiah
Trusted Advisor
Joined
Apr 11, 2009
Messages
5,467
I can't see the buttons on the page any more.
 

Ent

Josiah
Trusted Advisor
Joined
Apr 11, 2009
Messages
5,467
Sorry for the confusion, that was my script blocker preventing them from appearing.
 

Ent

Josiah
Trusted Advisor
Joined
Apr 11, 2009
Messages
5,467
It looks like you've got it sorted out. (y)
The only modification that I would suggest is placing your style code (width: 200px; clear: none; float: left; ) in the CSS file (styles/wbs.css) that affects all of your site. That way you can apply the same formatting to all the pages instead of having to change it each time. It also marginally reduces the size of each page visited on your site.

You'll learn quickly if you can show such determination and ability in research for all the problems you encounter.
 

Denys

Thread Starter
Joined
Nov 25, 2009
Messages
145
It looks like you've got it sorted out. (y)
The only modification that I would suggest is placing your style code (width: 200px; clear: none; float: left; ) in the CSS file (styles/wbs.css) that affects all of your site. That way you can apply the same formatting to all the pages instead of having to change it each time. It also marginally reduces the size of each page visited on your site.

You'll learn quickly if you can show such determination and ability in research for all the problems you encounter.
Thank you very much for your help. I have changed the width to 200px, but unfortunately :eek: the text that is meant to go underneath 'Don't just take our word for it....' is next to the buttons. Probably something simple but help is much appreciated!! (Wasn't anything to do with your recommended CSS change by the way, I already had the problem :D)
 

Ent

Josiah
Trusted Advisor
Joined
Apr 11, 2009
Messages
5,467
the Clear keyword allows you to force elements onto the next line.
Where your code reads
<p style="width: 200px; float: left; clear: none;">
try replacing it with
<p style="width: 200px; float: left; clear: right;">
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top