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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2012
    Location
    Charleston, SC
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts

    How to vertically align social media bottons

    I'm having a hard time trying to figure out how to vertically align social media buttons and I'm hoping someone here will be able to help me.

    The test page is at...
    http://www.charlestonsailingcharters...n/testCopy.htm
    you will notice that the social buttons are not lined up vertically.

    How can I accomplish this task?

    Brian
    Last edited by BBoyd; 12-14-2012 at 09:11 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello BBoyd,
    There is so much styling imported with those social buttons that it's much easier to center the li itself.

    Look at it this way -
    Code:
    .headerBar .socialSmall li {
        float: left;
        height: 20px;
        /*line-height: 40px;*/
        margin: 10px 1px 0 0;
        width: 80px;
    }
    Of course, your facebook icon in the first li does not fit in a 20px height.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    BBoyd (12-14-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Location
    Charleston, SC
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks! That does work, but it cuts off the facebook image. I changed the facebook icon that was provided with the theme to make it smaller and fit, but it still looks a little off.

  • #4
    New Coder
    Join Date
    Jan 2012
    Location
    Charleston, SC
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Decided to take another route and use "Add This".

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Quote Originally Posted by BBoyd View Post
    Decided to take another route and use "Add This".
    Looks much better...but your add this button looks to be about 125px wide. Doesn't quite fit in your 60px wide li.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jan 2012
    Location
    Charleston, SC
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Looks much better...but your add this button looks to be about 125px wide. Doesn't quite fit in your 60px wide li.
    Since this is the last list item, does it matter? I really do not know. I tested it in multiple browsers and it looks fine.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Quote Originally Posted by BBoyd View Post
    Since this is the last list item, does it matter? I really do not know. I tested it in multiple browsers and it looks fine.
    It may not matter at all? It does violate the box model rule though, so maybe you'll have an issue somewhere. It's easily fixed though, just remove the width to let the li enclose it's content. Some margin on the first thing I found available will put the space between your li's again.

    Code:
    .headerBar .socialSmall li {
        float: left;
        height: 40px;
        line-height: 40px;
        margin: 0;
        vertical-align: middle;
        /*width: 60px;*/
    }
    .addthis_button {
        cursor: pointer;
        margin: 0 0 0 20px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Jan 2012
    Location
    Charleston, SC
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    You're awesome Excavator!!! Code works beautifully. Thanks again!

  • #9
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    This website "www.addthis.com" will help you to use various type of social icon to your website.


  •  

    Posting Permissions

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