SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Align twitter and facebook buttons on my page.

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align twitter and facebook buttons on my page.

    Im trying to align the Facebook, twitter, and Google +1 button on my website hopefully someone has already done this and has a quick solution. I haven't signed up for Google +1 just yet im about to do that after this post. Below is the code I got and you can see the uploaded page at ukratom (dot) com (slash) home.html


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>Kratom | Kratom Leaf |</title>
      <meta name="description"
     content="uKratom offers information on kratom, kratom powder, kratom leaf, kratom extracts, effects of kratom, where to buy kratom and more.">
      <meta name="abstract"
     content="Get information about kratom, kratom extracts, kratom effects, kratom dosage and more. Learn all you can about the wounderful kratom plant.">
      <meta name="ROBOTS"
     content="ALL=INDEX,FOLLOW">
      <meta http-equiv="content-type"
     content="text/html; charset=utf-8">
      <link rel="stylesheet"
     type="text/css" href="styles.css">
      <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-30392963-1']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
      </script>
      <style type="text/css">
    p.c3 {text-align: center;}
    img.c2 {border: 0px solid ; width: 200px; height: 106px;}
    img.c1 {border: 0px solid ; width: 450px; height: 89px;}
      </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><a
     href="http://ukratom.com" title="kratom home"><img
     class="c1" src="http://ukratom.com/images/kraton_logo.jpg"
     alt="Kratom"></a><a
     href="http://www.bouncingbearbotanicals.com/ethnobotanicals-kratom-c-60_91.html?ref=4331"
     target="_blank"><img
     class="c2" alt="buy kratom, kratom buy"
     src="http://ukratom.com/images/Kratom_leaf.jpg"></a></h1>
    <iframe
     src="//www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"
     style="border: medium none ; overflow: hidden; width: 650px; height: 21px;"
     allowtransparency="true" frameborder="0" scrolling="no"></iframe>
    <a href="https://twitter.com/share"
     class="twitter-share-button" data-via="ukratom">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div id="wrapper">
    <div id="content"></div>
    </div>
    <div id="navigation">
    <ul>
      <li><a
     href="kratom_images.html" title="kratom images">Kratom
    Images</a></li>
      <li><a
     href="kratom_dosage.html" title="kratom dosage">Kratom
    Dosage</a></li>
      <li><a
     href="kratom_effects.html" title="kratom effects">Kratom
    Effects</a></li>
      <li><a
     href="kratom_extracts.html" title="kratom extract">Kratom
    Extracts</a></li>
      <li><a
     href="kratom_resin.html" title="kratom resin">Kratom
    Resin</a></li>
      <li><a
     href="kratom_crushed.html" title="crushed kratom leaf">Crushed
    Kratom Leaf</a></li>
      <li><a
     href="kratom_powder.html" title="kratom powder">Kratom
    Powder</a></li>
      <li><a
     href="kratom_tea.html" title="how to make kratom tea">How
    to Make
    Kratom
    Tea</a></li>
    </ul>
    </div>
    <div id="extra">
    <p class="c3"><a
     href="http://ukratom.com/" title="kratom home">Kratom
    Home</a>
    | <a href="sitemap.html"
     title="kratom sitemap">Site
    Map</a>| <a
     href="http://ukratom.com/links/link.php" title="ukratom Links">Links</a>
    </p>
    <div id="footer">
    <p class="white">&copy;
    uKRATOM.COM</p>
    </div>
    </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Mentor bronze trophy
    chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,041
    Mentioned
    9 Post(s)
    Tagged
    1 Thread(s)
    Currently your Facebook button has a width of 605px, simply change that to about 100px and it will sit nicely next to the Twitter button.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow what a nice fix. I had to set it to 50px but you knew what ur talking about. Thank You. and it looks like I have just enough room for the google button

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well now im having troubles since i added the google button. I tried switching the twitter and google button still there's a lot of space in between the 2. I changed the google button width from 120 to 75 but i didn't seem to have effect. I don't see where i can change the twitter width.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>Kratom | Kratom Leaf |</title>
      <meta name="description"
     content="uKratom offers information on kratom, kratom powder, kratom leaf, kratom extracts, effects of kratom, where to buy kratom and more.">
      <meta name="abstract"
     content="Get information about kratom, kratom extracts, kratom effects, kratom dosage and more. Learn all you can about the wounderful kratom plant.">
      <meta name="ROBOTS"
     content="ALL=INDEX,FOLLOW">
      <meta http-equiv="content-type"
     content="text/html; charset=utf-8">
      <link rel="stylesheet"
     type="text/css" href="styles.css">
      <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-30392963-1']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
      </script>
      <style type="text/css">
    p.c3 {text-align: center;}
    img.c2 {border: 0px solid ; width: 200px; height: 106px;}
    img.c1 {border: 0px solid ; width: 450px; height: 89px;}
      </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><a
     href="http://ukratom.com" title="kratom home"><img
     class="c1" src="http://ukratom.com/images/kraton_logo.jpg"
     alt="Kratom"></a><a
     href="http://www.bouncingbearbotanicals.com/ethnobotanicals-kratom-c-60_91.html?ref=4331"
     target="_blank"><img
     class="c2" alt="buy kratom, kratom buy"
     src="http://ukratom.com/images/Kratom_leaf.jpg"></a></h1>
    <iframe
     src="//www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"
     style="border: medium none ; overflow: hidden; width: 75px; height: 21px;"
     allowtransparency="true" frameborder="0" scrolling="no"></iframe>
    <!-- Place this tag where you want the +1 button to render --><g:plusone
     annotation="inline" width="75"></g:plusone><!-- Place this render call where appropriate -->
    <script type="text/javascript">
    (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><a
     href="https://twitter.com/share" class="twitter-share-button"
     data-via="ukratom">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    <div id="wrapper">
    <div id="content"></div>
    </div>
    <div id="navigation">
    <ul>
      <li><a
     href="kratom_images.html" title="kratom images">Kratom
    Images</a></li>
      <li><a
     href="kratom_dosage.html" title="kratom dosage">Kratom
    Dosage</a></li>
      <li><a
     href="kratom_effects.html" title="kratom effects">Kratom
    Effects</a></li>
      <li><a
     href="kratom_extracts.html" title="kratom extract">Kratom
    Extracts</a></li>
      <li><a
     href="kratom_resin.html" title="kratom resin">Kratom
    Resin</a></li>
      <li><a
     href="kratom_crushed.html" title="crushed kratom leaf">Crushed
    Kratom Leaf</a></li>
      <li><a
     href="kratom_powder.html" title="kratom powder">Kratom
    Powder</a></li>
      <li><a
     href="kratom_tea.html" title="how to make kratom tea">How
    to Make
    Kratom
    Tea</a></li>
    </ul>
    </div>
    <div id="extra">
    <p class="c3"><a
     href="http://ukratom.com/" title="kratom home">Kratom
    Home</a>
    | <a href="sitemap.html"
     title="kratom sitemap">Site
    Map</a>| <a
     href="http://ukratom.com/links/link.php" title="ukratom Links">Links</a>
    </p>
    <div id="footer">
    <p class="white">&copy;
    uKRATOM.COM</p>
    </div>
    </div>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Mentor bronze trophy
    chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,041
    Mentioned
    9 Post(s)
    Tagged
    1 Thread(s)
    The problem is the size of the button you have chosen to use, i would recommend you use a smaller version of the G+ button which should fix the odd looking space issue.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont think so i tried 3 dif ones. I tried the small and it was too small but the gap still was there. I tried the tall and i like how that looks but still the gap is there and I flipped the 2 around .

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Well is there any chance of you removing the div that encompasses the second iframe on the page? If so, you could just set the vertical alignment of all 3 (iframe, iframe, anchor) to vertical-align:bottom; or something like that and that way it would be consistant. Right now you could align the uncontained iframe and the anchor by using vertical alignment (some room is left at the bottom of the #header div for this very reason) but all three won't play ball unless something gives .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just ended up taking the count off the twitter button and putting 2 html spaces in between each. I dont know how to vertical align i suck

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Don't feel bad. Vertical alignment is a tricky part of web design. Though with IE7 dying, we can make more use out of display:table/table-cell and tables automatically make vertical align as simple as it gets . Might want to consider that in the future .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    236
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I use G+1 medium size, and I added this code in css.
    It aligns facebook, twiter and google +1 on same line.

    Code:
    #___plusone_0, #___plusone_0 iframe {
         display:inline !important;
         height:24px  !important;
        }
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

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
  •