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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Social Media buttons won’t align properly

    I intend to show a couple of SM button at the bottom of my page. It seems that I am not able to align those properly: the XING button always gets displayed with a line break instead of being in the same line as g+ and linkedin (see screenshot).



    here is my code that i paste into my cms:
    <!-- Google Plus-->
    <div class="g-plusone" data-annotation="inline" data-width="150"></div>
    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">// <![CDATA[
    window.___gcfg = {lang: 'de'};

    (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>

    <!-- LinkedIn-->
    <script src="http://platform.linkedin.com/in.js" type="text/javascript">// <![CDATA[
    lang: de_DE
    // ]]></script>
    <script type="IN/FollowCompany" data-id="3004504" data-counter="right"></script>

    <!-- XING -->
    <div data-counter="right" data-type="XING/Share" data-url="www.loomion.com"></div>
    <script type="text/javascript">// <![CDATA[
    ;(function (d, s) {
    var x = d.createElement(s),
    s = d.getElementsByTagName(s)[0];
    x.src = "https://www.xing-share.com/js/external/share.js";
    s.parentNode.insertBefore(x, s);
    })(document, "script");
    // ]]></script>

    <!-- Facebook -->
    <div><iframe width="300" height="150" style="border: none; overflow: hidden; width: 450px; height: 35px;" src="http://www.facebook.com/plugins/like.php?locale=de_DE&amp;href=http%3A%2F%2Fwww.facebook.com%2FLoomion&amp;send=false&amp;layout=sta ndard&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=3 5&amp;appId=109578372473828" allowtransparency="true" frameborder="0" scrolling="no"></iframe></div>

    Can anyone help? Thank you so much.
    Cheers
    Markus

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    145
    Thanks
    0
    Thanked 27 Times in 27 Posts
    hi elBoscho,

    Try adding this to your css:
    Code:
    <style type="text/css">
    div{ display: inline-block;}
    </style>
    Based on the code you put up, this appears to bring your social buttons inline. Keep in mind that the way i have the CSS, all elements on your page that is within a div tag may falter to being inline.

    hope this helps
    Last edited by Brandnew; 08-12-2013 at 04:56 AM.
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great! Works like a charm! Thank you!


  •  

    Tags for this Thread

    Posting Permissions

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