Results 1 to 3 of 3

Thread: Horizontal Navigation Bar Problem

  1. #1
    Join Date
    Mar 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Horizontal Navigation Bar Problem

    Hey there, I have a problem with my horizontal navigation bar.

    I wanted to add a divider inbetween my links like this,

    | Home | Contact Us | Staff | Reviews |

    but my navigation bar only shows

    | Home | Contact Us | Staff | Reviews

    As you can see, at the last link, the last divider is gone. Please note that my divider is a background image divider of 2x50. Here are my code,

    HTML
    Code:
    <div id="navigation"><!--NAVIGATION STARTS-->
    <ul class="nav-links">
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">work</a></li>
    <li><a href="#">forum</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
    </ul>
    </div><!--NAVIGATION ENDS-->
    CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    /* NAVIGATION */
    #navigation {
        float: left;
        height: 68px;
        width: 850px;
    }
    
    .nav-links li {
        display: block;
        list-style-type: none;
        float: left;
        background-image: url(-);
        background-repeat: no-repeat;
        background-position: left;
    }
     
    .nav-links li a {
        color: #666666;
        font-weight: bold;
        width: 108px;
        height: 42px;
        text-align: center;
        text-transform: uppercase;
        font-size: 12px;
        padding-top: 26px;
        float: left;
        text-decoration: none;
    	list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/
        margin-left: 2px;
    }
     
    .nav-links li a:hover {
        background-image: url(-);
        background-repeat: repeat-x;
        color: #0087c7;
        margin-left: 2px;
    }
    Test page: -

    I tried to find the solution myself but I just can't seem to make the last divider show up. Is there any problem with my CSS coding? Thanks!
    Last edited by Shadow X; 03-30-2011 at 06:38 PM. Reason: Solved + Removed test page and url

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Maybe something like this could help
    Code:
    #navigation {
        background-image: url("http://zn-mf1.webs.com/public/nav_seperatorlive.gif");
        background-position: 708px 16px;
        background-repeat: no-repeat;
        float: left;
        height: 88px;
        width: 850px;
    }

  3. #3
    Join Date
    Mar 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hmm this code will work but I isn't fond of it since I prefer to stay away from absolute positioning nowadays. :P

    Anyway I found a simple solution to fix the problem without the use of background image for my divider.

    Thanks for your effort and time!

Bookmarks

Posting Permissions

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