CODEWITHSUNDEEP
htmlcssfirefoxgoogle-plus
Rick Roy
Rick Roy

Reputation: 1728

Google + button not displaying poperly

I am trying to add social buttons to my site and I just cant bring the google+1 button closer to the the other social buttons. It just goes to the extreme left of the div.

I have put up the code in Jsfiddle please take a look

Here is how it is looking over at my end The social media icons See how the google+ button is to the extreme left

JSFiddle here http://jsfiddle.net/LYYhj/3/

The code - HTML part

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=291527307526682";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<article class="grid_6">
            <div class="wrapper">
              <ul class="ul-1">
                <li><!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="http://www.xgen-hosting.com" style="float:right;"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></li>
                <li><a href="https://twitter.com/XgenHosting" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @XgenHosting</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
                <li><div class="fb-like" data-href="http://www.xgen-hosting.com/" data-width="120" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></li>
              </ul>
            </div>
          </article>

The CSS part

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display:inline;
    float:left;
    position:relative;
    margin:0 10px
}
.wrapper{overflow:hidden;position:relative;}
.ul-1 {
    overflow:hidden;
    float:right;
    padding:48px 3px 0 0;
}
.ul-1 li {
    float:left;
    font-size:12px;
    line-height:15px;
    font-family: 'Droid Sans', sans-serif;
    text-transform:uppercase;
    text-shadow: 0 1px rgba(0,0,0, 0.6);
    background:url(../images/ul-1.png) left 3px no-repeat;
    margin-left:8px;
    padding-left:8px;
    color:#ddd;
}
.ul-1 li:first-child {
    background:none;
    padding:0;
    margin:0;
}
.ul-1 li a {
    color:#ddd;
}
.ul-1 li a:hover {
    color:#f04011;
    text-decoration:none;
}

Also when I implement the code into my page the google+1 button moves up by a little and no matter what I do I just cant manage to bring it to align with the other social button.

Link to the page http://www.xgen-hosting.com

Upvotes: 0

Views: 481

Answers (1)

Vikas Arora
Vikas Arora

Reputation: 1666

Here are the two ways you can do this.

Method 1: If you inspect element the google+ button in your browser and see the code for <li> elements, you can see that width of the google plus button is 120px, decreasing it will make your google plus button to align with other <li> buttons.

Below is the pic of what I am trying to say and what I tried using this method.

This is the inspect element part:

and this is the result I got:

enter image description here

Now, the second method, if above doesn't work:

Make the list as position: absolute; This way you can position the buttons like whatever you want.

If you don't want to put the absolute positioned elements on the page (because there position will vary according to screen size), then you can simply put the absolute position list inside of a <div> which is positioned relatively.

Upvotes: 1

Related Questions