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
    Mar 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Arrow horizontal navigation bar (extra space)

    I'm trying to create a horizontal navigation bar in a fixed width area but I always end up with a sliver at the end.

    this is my html code:

    Code:
    <ul id="navbar">
                	<li class="first"><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Apply Now</a></li>
                    <li><a href="#">Client Tools</a></li>
                    <li><a href="#">Types of Mortgages</a></li>
                    <li><a href="#">Educational</a></li>
                    <li><a href="#">Fannie Mae HomePath</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Contact Us</a></li>
    			</ul>
    this is my css code:

    Code:
    #topnav						{  clear:both; margin-bottom:20px; border-left:1px solid #990000; }
    #topnav li					{   background-color:#0867A9; display:inline; border-right: 1px solid #ca0002; padding:8px 0px; }
    #topnav li a, #topnav li a:link, #topnav li a:visited {	text-decoration:none; color:#fff; border-right:solid 1px #000; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;	padding:8px 9px;  }
    #topnav li.first 			{   border-left: solid 1px #ca0002;  }
    #topnav li a:hover 			{   background: #65A0C9;  color: #fff;  }
    Any help or suggestions are appreciated. This may be a double post because I cannot find the first one. Thanks!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I always end up with a sliver at the end.
    Your issue is not clear and I'm afraid the given code is not enough to reproduce the issue. Please post your complete HTML+CSS or a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    change "display: inline;" to "float: left;"
    That should solve your problem.


  •  

    Posting Permissions

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