SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Social Media Buttons - help please

    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.

    Code:
    <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.

    Code:
    #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); }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have had success, all completed, and working well

    So no need to reply to this post, best wishes

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

    Code:
    <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>
    Code:
    /* ********** [ 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; }

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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

    Code:
    #socialButtons div {}
    That's a much more efficient use of CSS.

  7. #7
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RayWilk View Post
    How to use the #socialButtons div {}
    Instead of this:

    Code:
    #paddingRight {
      display: inline;
      padding-right: 10px;
    }
    you'd use this:

    Code:
    #socialButtons div {
      display: inline;
      padding-right: 10px;
    }

  9. #9
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello ralph.m, good to hear from you

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

    Code:
    #socialButtons div { /*Footer Social Buttons*/
    	width: 32px;
    	height: 32px;
    	display: inline;
            padding-right: 20px; }
    Code:
    <!-- 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 -->

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hm, things have gone a bit screwy there. Firstly, you don't want this in there:

    Code:
    #socialButtons {
    width: 32px;
    height: 32px;
    display: inline;
    }
    Now, admittedly, removing that will break things, but hang in thaya. You also want to lose this:

    Code:
    #paddingRight {
    display: inline;
    padding-right: 10px;
    }
    Next, add this:

    Code:
    #socialButtons {
    overflow: hidden;
    }
    and I would change this:

    Code:
    #socialButtons div {
    width: 32px;
    height: 32px;
    display: inline;
    padding-right: 20px;
    }
    to this:

    Code:
    #socialButtons div {
    width: 32px;
    height: 32px;
    padding-right: 20px;
    float: left;
    }
    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.

  11. #11
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello ralph.m, good to hear from you all buttons inline, yet no spacing yet

    ok I have the css to this:

    Code:
    #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;

    Code:
    <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>

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I'd need to see the online version, but the page you originally linked to hasn't been updated, so I can't advise.

  13. #13
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RayWilk View Post
    can not see/find the #socialButtons div css
    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.

  15. #15
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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'); }

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RayWilk View Post
    why is a color and page_bg.gif used ? why not just use color only? or gif only ?
    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.

  17. #17
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    #socialButtons div {
    Code:
    div#footer {

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    #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".

  19. #19
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ralph.m for that info, your generous help is greatly appreciated,very best wishes

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    No problem. Glad I could help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •