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
    Regular Coder
    Join Date
    Feb 2014
    Posts
    110
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Arranging/aligning icons

    Hello

    I have three horizontally-aligned icons and have added a fourth to my unordered list:

    Code:
    <li><img id="picright1" src="http://www.codingforums.com/images/facebook.png" width="64" height="64" alt="Facebook" /></li>
    <li><img id="picright2" src="http://www.codingforums.com/images/twitter.png" width="56" height="56" alt="Twitter" /></li>
    <li><img id="picright3" src="http://www.codingforums.com/images/rss.png" width="56" height="56" alt="Rss" /></li>
    
    <li><a id="loginButton"><span>Login</span></a></li> <----- newly added
    In my <head> tags, I have:

    Code:
    <style type="text/css">
    
    .list-inline {
      list-style: none;
    }
    
    .list-inline > li {
      display: inline-block;
    
    .list-inline > li a {
    padding: 0px 0px 5px 0px;
    }
    With this padding attribute in 'list-align', I am trying to raise the 'log-on' button a little so that it is horizontally aligned with the FB and other icons (please see attached) and, ideally, they should all be pulled over to the right.

    The padding, however, doesn't make any difference!

    What should I be doing, please, to raise the log-on button slightly and to pull all the icons over to the right?

    The page itself is here: http://www.bayingwolf.com/DimaWeb/index2.asp

    Thank you very much.

    Blue
    Attached Thumbnails Attached Thumbnails Arranging/aligning icons-codforum.jpg  

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Location
    Belgium
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    the quickest way is to use margin-bottom on your #loginButton in style2.css line22

  • Users who have thanked Jason_B for this post:

    Blue1 (04-27-2014)

  • #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    110
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Hello Jason_B

    Thank you for your reply.

    I have removed 'padding: 0px 0px 5px 0px;' from my index2.asp page and inserted 'margin-bottom: 5px;' in my external style-sheet under '#loginButton' as you suggested, and it looks just fine!

    Thank you very much!

    Blueie


  •  

    Posting Permissions

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