Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts

    Cannot align 3 buttons :((

    Hello, I am trying to align 3 buttons at http://modapokazy.pl
    In the site there were only the FB icon and the FB like button. I managed to somehow align them.

    Today I have just added the google plus one button in the code. However it is in the next line. I would like to have the 3 buttons aligned in a row.

    This is the code:
    Code:
    <!--here the like button starts -->				
    <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=267119293321335";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    				
    <div style="margin:10px 96px 0px;">
    
    <div class="fb-like" data-href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-colorscheme="dark"></div>
    
    </div>
    <!--here the like button ends -->		
    		
    <!--here the facebook icon starts -->
    <a href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" target="_blank"><img src="http://modapokazy.pl/wp-content/themes/kingsize/facebookblackandwhite.png" alt="Facebook" style="position:absolute; margin-left:58px; margin-top:-24px;"></a>	
    <!--here the facebook icon ends -->
    
    <!--here the google plus button starts -->
    <!-- Place this tag where you want the +1 button to render. -->
    <div class="g-plusone" data-size="medium" data-href="http://modapokazy.pl"></div>
    
    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">
      window.___gcfg = {lang: 'pl'};
    
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
    <!--here the google plus button ends -->
    
    What should I do? I tried many combinations, but I couldn't manage to do it.
    Last edited by utnalove; 07-27-2012 at 01:09 PM.

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Code:
    #image1 {
    background-image: url('this.png');
    height: 65px;
    width: 65px;
    float: left;
    display: block;
    }
    
    #image2 {
    background-image: url('this.png');
    height: 65px;
    width: 65px;
    float: left;
    display: block;
    }
    
    #image3 {
    background-image: url('this.png');
    height: 65px;
    width: 65px;
    float: left;
    display: block;
    }
    don't forget the no-repeat

  • Users who have thanked stevenmw for this post:

    utnalove (07-27-2012)

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    sorry, I didn't get it

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Put the above code in your CSS, and alter it to your needs. Then put the below code in the html.

    Code:
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>

  • Users who have thanked stevenmw for this post:

    utnalove (07-27-2012)

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    hmm, I did it. This is the actual code:

    Code:
    <div id="image1">
    <!--here the like button starts -->	
    <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=267119293321335";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>				
    <div class="fb-like" data-href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-colorscheme="dark"></div>
    <!--here the like button ends -->		
    </div>
    
    <div id="image2">		
    <!--here the facebook icon starts -->
    <a href="https://www.facebook.com/pages/Sergio-Foto/366880513364848" target="_blank"><img src="http://modapokazy.pl/wp-content/themes/kingsize/facebookblackandwhite.png" alt="Facebook"></a>	
    <!--here the facebook icon ends -->
    </div>
    
    <div id="image3">
    <!--here the google plus button starts -->
    <!-- Place this tag where you want the +1 button to render. -->
    <div class="g-plusone" data-size="medium" data-href="http://modapokazy.pl"></div>
    
    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">
      window.___gcfg = {lang: 'pl'};
    
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
    <!--here the google plus button ends -->
    </div>
    Still there is something wrong

  • #6
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Looking at the result of your link the need to be in a container.

    put them all inside one div. Such as

    Code:
    #wrap {
    edit to your needs
    }
    Code:
    <div id="wrap">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
    </div>

  • Users who have thanked stevenmw for this post:

    utnalove (07-27-2012)

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Excellent!!! It looks wonderful now.
    Thanks so much


  •  

    Posting Permissions

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