SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Help to show Google login button

    I have css and html codes below. It only display Facebook login button but hide Google login button although when view source I can see it there. Any idea to fix it? http://thejobs.com.my/

    fb.jpg

    Code:
    .social_Ct {position: relative;margin: 10px auto;}
    .social_Ct li {background: url(http://thejobs.com.my/mod/CSS/sprites/sprites_HZ_1-7-2014.png) no-repeat;position: absolute;display: block;list-style: none;}
    .social_Ct a {height:32px;display: block;}
    .social_Login{padding:0 0 0 0;height:75px}.blue{color:#2b83b6}.social_Ct .google_Login{ background-position: -1390px 0px; width: 162px; height: 29px;  }.social_Ct .FB_Login{ background-position: -1218px 0px; width: 162px; height: 29px;  }
    HTML Code:
    	<div class="social_Login">
    	Sign in using social network:<br>
    <ul class="social_Ct">
      <li class="google_Login"><a href="/social/?network=google" class="" alt="Login with google" title=""></a></li>
    
      <li class="FB_Login"><a href="/social/?network=facebook" class="" alt="Login with Facebook" title=""></a></li>
    </ul>
    	</div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Try adding this cSS.
    Code:
    .social_Ct li{position:relative;margin:0 0 5px}
    You have the elements set to absolute and so they are actually sitting on top of each other.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    Try adding this cSS.
    Code:
    .social_Ct li{position:relative;margin:0 0 5px}
    You have the elements set to absolute and so they are actually sitting on top of each other.
    Thank for reply. I have changed it but it shown in row. May I know how to set it inline (Left and Right)?

    http://jsfiddle.net/ySYps/1/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want them on one line at left and right then try this:
    Code:
    .Login_Ct{padding:0}
    .Login_Ct li {float:left}
    .Login_Ct li + li {float:right}
    Remember with uls you need to clear the default horizontal margins and padding or you will get extra space to the left.


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
  •