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

    Social Buttons line up Facebook/ Tweet/ google plus/ stumbleupon/ linkedIN/ youtube

    Hello everyone at codingforums.com

    I have been working on an issue on my new website I am putting together. I must apologize upfront as I work 60 hrs a week/ single father and try my hardest to get time to learn HTML and CSS3. I picked up a free template off the web and got to work trying to customize it to look original and have a fresh feeling to it.

    I decided to add the social buttons/ facebook like/ twitter so on and so forth- I could not get these social buttons to line up so I decided to go with a generator, but the generated social buttons were not what I was looking for.

    If you could please take a look at my current issue, I am going to provide the link and the code to show you what I have so far. I have been staring at this for quite some time now, to embarassing to tell you how long lol. I also know that this topic is covered all over the web, my problem is looking at examples or trying to learn what I need to do just ends up not making since, or I am reading something completely different for a different coding set like Drupal, etc-

    I am mainly asking if there is anyone who could shoot me an example for a complete newbie, or give me some tips or something I should look into or try to learn.


    ------------------------

    website with social buttons not lining up.

    MySupportTech Computer Repair Support Virus Removal


    --------------------------
    CSS


    social_buttons.css

    .social_buttons { width:475px; margin:0px; height:30px; background-color: #ace}
    .social_buttons ul div {display: inline;}
    .social_buttons li {display: inline; border: 1px solid #000; width: 15%; float: left;}




    HTML

    <div class="social_buttons">
    <ul>
    <li>
    <div class="fb-like" data-href="http://www.mysupporttech.com" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
    </li>
    <li>
    <a href="https://twitter.com/share" class="twitter-share-button"data-count="vertical" data-via="mysupporttech">Tweet</a>
    </li>
    <li>
    <div class="g-plusone" data-size="tall"></div>
    </li>
    <li>
    <su:badge layout="5"></su:badge>
    </ul>
    <li>
    <script type="IN/Share" data-url="http://www.mysupporttech.com" data-counter="top"></script>
    </ul>
    <li>
    <div class="g-ytsubscribe" data-channel="mysupporttech" data-layout="default" data-count="default"></div>
    </ul>
    </div>





    I have looked at so many examples and tried replacing/ changing/ modifying so many things but it still never lines up - these are just snippets I have stared out for many hours, they all had text explaining them but I just could not follow it.



    {margin-bottom: -3px !important;}
    {float:right!important;}

    #contain {
    float: left;
    display: inline;
    width:auto;
    height: 25px;
    position: absolute;
    top: 106px;
    right: 12px;
    overflow:visible;
    margin: 0px;
    padding: 0px;
    border: thin solid #006600;

    }

    #plus{
    display: inline;
    overflow:visible;
    position:relative;
    width:auto;
    vertical-align:top;
    background-color: #00CC33;
    margin: 0px;
    padding: 0px;
    height: 25px;
    /*background-color:#00CC99;*/
    }

    {display: inline-block; vertical-align: top;}
    {display: inline !important;}






    Thanks for reading my post and I appreciate anyone who can shoot me some advice or possible changes I can make to get this working. Thanks so much again, I appreciate your time.

  • #2
    New Coder
    Join Date
    Dec 2013
    Location
    Were my backpack is!
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Did you get this figured out? They look straight now.


  •  

    Posting Permissions

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