Social Media Buttons - help please

RayWilk · October 16, 2013, 4:21am

I am adding social media button to the footer. yet the buttons are not showing/displaying, your help appreciated.

vldperson.atwebpages.com (site/page can be seen here)

/vldperson.atwebpages.com/templates/nightlife/media/Social32/facebook.png

I have added this code to the footer.

<div id="footerSocial">

<h2 class="footerTitle">Share Dating Asian Singles with Friends</h2>
			
<!-- Start SOCIAL MEDIA ICONS -->
			
<p><a href="http://www.facebook.com" id="socialFacebook" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"></a></p>
            
<!-- End SOCIAL MEDIA ICONS -->		
</div>

I have added this code to the CSS.

#footerSocial {  /*Social Buttons*/
    width: 340px;
    padding: 60px 0 0 0;
    margin: 0 auto; 
    position:relative;
    left:10px; }

 #socialFacebook {
	float: center;
	width: 34px;
	height: 35px;
	margin-right: 10px;
	margin-bottom: 18px;
	background: url(../templates/nightlife/media/Social32/facebook.png); }

ralphm · October 16, 2013, 4:43am

You’ll need to float the Ps rather than the As, and also give the Ps the width and height you want. Also

the facebook image is missing
there is no float: center
set the #footerContainer div to overflow: hidden so those floated buttons won’t hand outside it.

RayWilk · October 16, 2013, 5:44am

I have had success, all completed, and working well

So no need to reply to this post, best wishes

ralphm · October 16, 2013, 9:26am

OK, cool, I won’t reply, but glad you got it working.

Although, be aware that in some browsers, the last item is dropping to a new line. Perhaps reduce the right margins a bit so it’s not such a tight fit.

RayWilk · October 16, 2013, 10:43am

Hello ralph.m, good to hear from you, I would appreciate you looking at my final code/css as I am sure it is not best practices…but it is working

vldperson.atwebpages.com (site/page can be seen here)

<div id="footerTitle">
<h3 class="footerTitle">Share Dating Asian Singles with Friends</h3>
</div>

<!-- Start SOCIAL MEDIA ICONS --> 

<div id="socialButtons">

<div id="paddingRight">
<a href="http://www.facebook.com"  onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/facebook.png" alt="Facebook"></a>
      </div>

/* ********** [ FOOTER ] ********** */

#footerTitle {  /*Footer Social Buttons Title*/
    float: center;
    position:relative;
    left:80px; 	}

#footerSocial { /*Footer Social Buttons*/
    float: center;
    width: 460px;
    padding: 0 0 0 0;
    margin: 0 auto; 
    height: 50px;
    position:relative;
    left:10px; }

 #socialButtons { /*Footer Social Buttons*/
	float: center;
	width: 32px;
	height: 32px;
	display: inline;
	padding-right: 10px; }
	
#paddingRight {  /*Footer Social Buttons Spacer*/
        display: inline;
	padding-right: 10px; }

ralphm · October 16, 2013, 12:37pm

Hehe, you love that float: center, don’t you! (Even my flagging it in red didn’t help.) It’s doing nothing at all, because it doesn’t exist in CSS. Luckily the inner divs are set to display: inline, as otherwise you’d be pretty miserable right now.

Many would prefer to see you code this as a list, as you basically have a list of links. But anyhow, the one other thing I’d say is that you are misusing IDs, as you are only aloud to use an ID once per page, so all those #paddingRights are invalid (though the browser is being kind and letting you off the hook). They would be better as classes, although they are not needed at all, as you could just target those divs as

#socialButtons div {}

That’s a much more efficient use of CSS.

RayWilk · October 16, 2013, 1:06pm

Hello ralph.m, good to hear from you

ok all float: center removed, and all is still in place … lol Thank you

Yes I would like to remove all the <div id=“paddingRight”>

How to use the #socialButtons div {}

your help appreciated

ralphm · October 16, 2013, 1:25pm

Instead of this:

[COLOR="#FF0000"]#paddingRight[/COLOR] {
  display: inline;
  padding-right: 10px;
}

you’d use this:

[COLOR="#FF0000"]#socialButtons div[/COLOR] {
  display: inline;
  padding-right: 10px;
}

RayWilk · October 17, 2013, 9:26am

Hello ralph.m, good to hear from you

I now have this, but there is no button spacing.

#socialButtons div { /*Footer Social Buttons*/
	width: 32px;
	height: 32px;
	display: inline;
        padding-right: 20px; }

<!-- Start SOCIAL MEDIA ICONS --> 
<div id="socialButtons">
<a href="http://www.facebook.com"  onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/facebook.png" alt="Facebook" /></a>
<a href="https://twitter.com/DatingAS" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/twitter.png" alt="Twitter" /></a>
 <a href="https://accounts.google.com/ServiceLogin" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/googlep.png" alt="Google" /></a>
<a href="http://www.linkedin.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/linkedin.png" alt="Linkedin" /></a>
<a href="http://www.stumbleupon.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/stumbleupon.png" alt="Stumbleupon" /></a>
<a href="http://www.delicious.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/delicious.png" alt="Delicious" /></a>
<a href="http://www.digg.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/digg.png" alt="Digg" /></a>
<a href="http://www.dribbble.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/dribbble.png" alt="Dribbble" /></a>
<a href="http://www.flickr.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/flickr.png" alt="Flickr" /></a>
<a href="http://www.vimeo.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/vimeo.png" alt="Vimeo" /></a>
</div>
<!-- End SOCIAL MEDIA ICONS -->

ralphm · October 17, 2013, 10:48am

Hm, things have gone a bit screwy there. Firstly, you don’t want this in there:

#socialButtons {
width: 32px;
height: 32px;
display: inline;
}

Now, admittedly, removing that will break things, but hang in thaya. You also want to lose this:

#paddingRight {
display: inline;
padding-right: 10px;
}

Next, add this:

#socialButtons {
overflow: hidden;
}

and I would change this:

#socialButtons div {
width: 32px;
height: 32px;
[COLOR="#FF0000"]display: inline;[/COLOR]
padding-right: 20px;
}

to this:

#socialButtons div {
width: 32px;
height: 32px;
padding-right: 20px;
[COLOR="#FF0000"]float: left;[/COLOR]
}

That should pretty much do it, except that your HTML is broken. The Digg link is mal formed. I think you are missing the opening <div> tag or something.

RayWilk · October 17, 2013, 11:42am

Hello ralph.m, good to hear from you all buttons inline, yet no spacing yet

ok I have the css to this:

#footerTitle {  /*Footer Social Buttons Title*/
    position:relative;
    left:80px; 	}

#footerSocial { /*Footer Social Buttons*/
       width: 460px;
       padding: 0 0 0 0;
       margin: 0 auto; 
       height: 50px;
       position:relative;
       left:10px; }
	
#socialButtons { /*Footer Social Buttons*/
overflow: hidden;
}

#socialButtons div { /*Footer Social Buttons div*/
	width: 32px;
	height: 32px;
       padding-right: 20px;
       float: left; }

and all the html is;

<div id="footerSocial">
		
		<div id="footerTitle">
		<h3 class="footerTitle">Share Dating Asian Singles with Friends</h3>
		</div>
<!-- Start SOCIAL MEDIA ICONS --> 
	<div id="socialButtons">
<a href="http://www.facebook.com"  onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/facebook.png" alt="Facebook" /></a>
<a href="https://twitter.com/DatingAS" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/twitter.png" alt="Twitter" /></a>
 <a href="https://accounts.google.com/ServiceLogin" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/googlep.png" alt="Google" /></a>
<a href="http://www.linkedin.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/linkedin.png" alt="Linkedin" /></a>
<a href="http://www.stumbleupon.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/stumbleupon.png" alt="Stumbleupon" /></a>
 <a href="http://www.delicious.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/delicious.png" alt="Delicious" /></a>
 <a href="http://www.digg.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/digg.png" alt="Digg" /></a>
<a href="http://www.dribbble.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/dribbble.png" alt="Dribbble" /></a>
 <a href="http://www.flickr.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/flickr.png" alt="Flickr" /></a>
<a href="http://www.vimeo.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false"><img src="templates/nightlife/media/Social32/vimeo.png" alt="Vimeo" /></a>
      </div>
		<!-- End SOCIAL MEDIA ICONS -->	
			
		</div>

ralphm · October 17, 2013, 12:16pm

I’d need to see the online version, but the page you originally linked to hasn’t been updated, so I can’t advise.

RayWilk · October 17, 2013, 1:43pm

Hello ralph.m, oh yes, I forgot, sorry, I moved everything to this new url today.

http://www.dating-asian-singles.com/

your time, and help is greatly appreciated

When I use Inspect Element on the Buttons, I can see the #footerSocial css, and the #footerTitle css, and the #socialButtons css

But can not see/find the #socialButtons div css

ralphm · October 17, 2013, 10:32pm

It was up to you to put it in there … although it’s irrelevant now, as you’ve changed the HTML by removing all those divs around the icons, so that code is redundant now.

RayWilk · October 18, 2013, 12:12am

Hello ralph.m, ok got ! Thank you when you said “by removing all those divs around the icons, so that code is redundant now.” the penny dropped !

So all working well, all looking good, thank you ralph.m

I have a css question: In the code below, why is a color and page_bg.gif used ? why not just use color only? or gif only ?

body {
cursor: default;
font: 14px arial, verdana, sans-serif;
color: #222222;
background: #F3D7F2 url(‘page_bg.gif’); }

ralphm · October 18, 2013, 12:31am

Having the color value in there is handy for when images don’t load, for example. In your case, the background image is missing, so you are just seeing the plain color anyway. It’s really up to you what you do, though. If the image doesn’t load and a background color isn’t needed (i.e. if a white bg is OK), then there’s no need for the bg color.

The only point of having an image there is when you want something nicer than a plain color.

RayWilk · October 18, 2013, 3:32pm

Hello ralph.m, ok got ! Thank you

Ok yes ok thought that maybe was the reason for a background color.

What is the difference between these two css lines? with the div placed differently.

#socialButtons div {

div#footer {

ralphm · October 18, 2013, 10:56pm

#socialButtons div selects a div that’s inside another element with an ID of “socialButtons”.

div#footer selects a div that itself has an ID of “footer”.

RayWilk · October 19, 2013, 2:33am

Thank you ralph.m for that info, your generous help is greatly appreciated,very best wishes

ralphm · October 19, 2013, 4:57am

No problem. Glad I could help.