38 users online (0 members and 38 guests)  

Thread: Nav Bar Help


  Results 1 to 3 of 3
  1. #1
    elise's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2011
    Posts
    1

    Nav Bar Help

    I'm using CSS to create a nav bar in my page, but the menu is ending up split between 2 lines, I wanted to get rid of some of the empty space around each nav button, but nothing I put in seems to work. I have the relevant CSS & html coding below. Thanks for your help!

    Nav part of CSS:

    #nav1 {
    height:30px;
    margin:0 auto ;
    text-align:center;
    }

    #nav1 ul {
    display:table;
    margin:0 auto;
    padding:0;
    list-style-type:none;
    position:relative;
    height:30px;
    text-transform:uppercase;
    font-size:11px;
    font-family:Arial,sans-serif;
    }


    #nav1 ul li {
    display:block;
    float:left;
    margin:0;
    padding:0;
    background:transparent url('images/css/hmenu.jpg') repeat-x top left;
    border-left:1px solid #1e1e1e;

    }


    #nav1 ul li a {
    display:block;
    float:left;
    color:#FFFFFF;
    text-decoration:none;
    padding:0px 50px ;
    line-height:30px;
    font-weight:bold;
    }


    #nav1 ul li a:hover, #nav1 li#current a {
    color:#FFFFFF;
    background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
    }


    Nav part of html:

    <div id="nav1">
    <ul>
    <li id="current" style="border:none" width="2em">
    <a href="#" shape="rect">Home</a>
    </li>
    <li>
    <a href="#" shape="rect">Recipe Index</a>
    </li>
    <li>
    <a href="#" shape="rect">Beef</a>
    </li>
    <li>
    <a href="#" shape="rect">Pork</a>
    </li>
    <li>
    <a href="#" shape="rect">Chicken</a>
    </li>
    <li>
    <a href="#" shape="rect">Seafood</a>
    </li>

    </ul>
    </div>

  2. #2
    FrankC's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2011
    Posts
    13

    Re: Nav Bar Help

    You have some funny things in your code. Here is a tutorial on how to create such a menu:

    css.maxdesign.com.au/listutorial/horizontal01.htm

    Just paste it into the browser address bar.
    Last edited by FrankC; 10-07-2011 at 04:15 AM.

  3. #3
    FrankC's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2011
    Posts
    13

    Re: Nav Bar Help

    I noticed that that tut employs display:inline, but that is not very handy. Here is a better code, with explanation:

    HTML Code:
    <!DOCTYPE html>
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #navDiv {
        width: 535px;  /* widths + margins + borders */
        _width: 540px; /* 1px extra per li for IE6 */
        margin: auto;
    }
    #navDiv ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #navDiv li {
        float: left; /* see text */
        width: 100px;
        border: 1px solid black;
        margin-right: 5px;
    }
    #navDiv a {
        display: block;
        width: 100px; /* for IE6 */
        text-decoration: none;
        text-align: center;
        background: yellow;
        color: black;
    }
    #navDiv a:hover {
        background: black;
        color: yellow;
    }
    #clearingDiv {
        clear: left; /* neutralizes the float influence */
    }
    p#onFloat {
        width: 540px;
        margin: auto;
    }
    </style>
    </head>
    <body>
        <div id="navDiv">
            <ul>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
        </div>
        <div id="clearingDiv"></div>
    <br />
    <p id="onFloat">With float:left, one can give the list items a width, and the menu items can be put against each other. That is not possible/difficult with display:inline, and display:inline-block is not supported by IE6/7.</p>
    </body>
    </html>