Adding social networkign icons to a mini-header at the top of page.

Skull

Skull

Skull

Soldato
Joined
15 Jan 2005
Posts
2,717
Location
London
First I want to say thank you in advance for any advice or help given in this thread, I really appreciate it.

I have a website (made from a template) and I'd like to put some social media icons (facebook like, Google+ etc) in the top right, in the black bar. The bar seems able to handle images ok (see http://www.veryvocalenglish.com/originalindex.html)

but when I try to add something more complicated like the facebook like button, it gets stuck in the centre. Bah. Thats the trouble with templates eh?

http://www.veryvocalenglish.com

Is it possible to either alter the CSS for the black bar so it's workable, OR can someone provide replacement code that will create an identical black bar along the time that I can put my social networking buttons in?

Here is the CSS for the "helpdesk"
/*helpdesk*/
#helpdesk { width: 980px; padding: 0 890px; margin: -145px -870px 0; height: 45px; line-

height: 45px; color: #8d8d8d; background: #000; text-align: right; float: right; font-size:

.8em;}
#helpdesk a { float: right; color: #8d8d8d; margin: 0;}
Click to expand...
 
Do you mean I need to add a div class for the facebook like button to my CSS, or change the code facebook provides?

<div class="fb-like" data-href="https://www.facebook.com/pages/Very-

Vocal-English/194080157341336" data-send="false" data-layout="button_count" data-width="80" data-

show-faces="false"></div>
Click to expand...

I'm really scratching my head over this one... I've managed to install a Google+ button instantly with no hassle, but because the facebook one is a div everything gets screwed up...
 
You need a CSS declaration of

div.fb-like {float:right;} in your CSS file. Presumably you already have a div.fb-like in there since you call up the class.
 
Apparently I do not actually have that in my CSS, but I added
fb-like {float:right} to the bottom of my CSS file and the facebook button remains resolutely in the centre of the page. Sigh! Maybe I should just give up and stick it elsewhere.
 
It needs to be
Div.fb-like not just fb-like.

If you can post up the css you have then I'll edit it for you and send it back.
 
Makhaira said:
It needs to be
Div.fb-like not just fb-like.

If you can post up the css you have then I'll edit it for you and send it back.
Click to expand...

No it doesn't... he'd just need a . in front of his "fb-like" to denote it's a class style.

.fb-like {float: right;} - should work.

Also Skull, you need to check out your site on wider resolutions. Your background header and footer image (http://images1.veryvocalenglish.com/images/main-heading-footer-bg.jpg) isn't wide enough on my display and you get hard lines at each side. Fade them to a solid colour at the edges.

EDIT: I should point out I can't see the error on your page because it has presumably been fixed but also that Makhaira's comment is not wrong, just not necessary.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom