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 4 of 4
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Difficulty aligning these images !

    Hi

    At the bottom of this page I have three social site images.

    As you can see 2 images are on top of the blogger image.

    http://mobi6.net/carguy/

    This is my HTML code:

    Code:
    <div style="text-align: center;">
    
    <a href="https://twitter.com/carguy09" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @carguy09</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>
    
     <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
    <script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/carguy" data-format="click" width="80px" height="80px"  ></script>
    
    <img class="aligncenter" src="http://mobi6.net/images/blogger_btn.jpg" width="80px" height="80px" alt="" style="border:0px;" />
    </div>
    How can I get these 3 images in a horizontal line:

    image1 image2 image3

    ????


    Many thanks for any help.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove class="aligncenter" from that image, to exclude it from the rule
    Code:
    img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    in your CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    That's great

    abduraooft - you are SO good at this stuff !!


    This is what it now looks like:
    ( images at bottom of page )

    http://mobi6.net/carguy/

    Given that my code is getting the images from js script,
    is there a way to increase the first 2 images height to 80px so that
    they all look more harmonious ?

    This is the current code:

    Code:
    <div>
    <center>
    <a href="https://twitter.com/carguy09" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @carguy09</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>
    
     <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
    <script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/carguy" data-format="click" width="80px" height="80px"  ></script>
    
    <img src="http://mobi6.net/images/blogger_btn.jpg" width="80px" height="80px" alt="" style="border:0px;" />
    </center>
    </div>
    Thanks again.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It might be better and easier for you to get a smaller icon for the third one
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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