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 Coder
    Join Date
    Jan 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Basic CSS Horizontal Nav Problem: Trying to center the Nav Bar

    HELLO:
    I am having a problem centering a CSS horizontal nav bar. It seems like a basic problem that must have been worked out before, but I can't find a solution anywhere (so please help if you can !)

    You can see the menu here

    As you can see the menu is shifted over towards the left hand side, and in addition, in Firefox the green background of the menu does not extend out to the black border on the right hand side.

    Here is the code I have used:

    For the HTML:
    PHP Code:
    <div id="navbar" class="nav">
    <
    ul>
            <
    li class="first"><a href="/admin/events/">SUBSCRIBE</a></li>
            <
    li><a href="/admin/photos/">ISSUES</a></li>
            <
    li><a href="/admin/content/">PURCHASE CATALOG</a></li>
            <
    li><a href="/admin/press/">SELLERS GUIDE</a></li>
            <
    li><a href="/admin/resources/">PRODUCTS</a></li>
            <
    li><a href="/admin/resources/">NEWSLETTERS</a></li>
            <
    li><a href="/admin/resources/">EVENTS</a></li>
            <
    li><a href="/admin/resources/">BLOGS</a></li>
            <
    li><a href="/admin/resources/">ABOUT US</a></li>
    </
    ul>

    </
    div
    And the CSS:
    PHP Code:
    #navbar {
        
    width768px;
        
    text-aligncenter;
        
    background-color#098E00;
        
    margin-top35px;
    }

    .
    nav ul {
        
    width768px;
        
    /*margin: 0 0 0 15px;*/
        
    margin0;
        
    padding0;
        list-
    stylenone;
        
    text-aligncenter;
        
    font-size11px;
        
    line-height1.4;
    }



    /* any li element within .nav container */
    .nav li {
        
    floatleft;
        
    margin0;
        
    padding0;
        list-
    stylenone;
        
    border-left1px solid #fff;
    }

    /* any anchor in a .nav list item element */
    .nav li a {
        
    displayblock;         /* expand to fill parent li */
        
    margin0;              /* no space between anchors */
        
    padding3px 6px 3px 6px;
        
    text-decorationnone;  /* no underline */
        
    color#fff;         /* override default link color */
        
    background-color#098E00;
    }

    /* 1st list item has no left border */
    .nav li.first {
        
    border-left0 none;
    }

    /* rollover effect */
    .nav li a:hover {
        
    background-color#7EC214;

    What do I have to do to make the menu centered (in relation to the black-lined containing div), and how do I make the green background extend out to the right in Firefox.

    Any help you can give is greatly appreciated.
    Thanks.

  • #2
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Code:
     #navbar { 
        margin: 35px auto 0;
    }

  • #3
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    change the navbar code:

    Code:
    #navbar {
        width: 740px;
        text-align: center;
        background-color: #098E00;
        margin-top: 35px;
    }
    you had it set to 768px wide when the bar is actually only 740px
    Channy

    I would love to change the world, but they won't give me the source code...


  •  

    Posting Permissions

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