47 users online (1 members and 46 guests)  


  Results 1 to 3 of 3

Related

  1. Navigation    Forum: HTML Forum
    Replies: 5
  2. Navigation    Forum: HTML Forum
    Replies: 1
  3. navigation    Forum: HTML Forum
    Replies: 7
  1. #1
    hyper42's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    1

    Exclamation Navigation bar problems

    I am having a problem getting my navigation bar to work right. The link boxes themselves are 6 pixels below the top of the container. The background is also down even farther. Here is the relevant code:

    CSS:

    body
    {
    font-family:verdana;
    margin:0;
    padding:0;
    overflow:auto;
    background-color:black;
    }

    div.mainContainer
    {
    margin-right:auto;
    margin-left:auto;
    margin-bottom:10px;
    margin-top:0;
    padding:0px;
    width:1024px;
    background-color:white;
    padding-bottom:15px;
    }

    h1.mainHeader
    {
    font-size:50px;
    color:#DE4B1B;
    font-decoration:bold;
    background-color:black;
    border:0;
    margin:0;
    padding:25px;
    }

    a
    {
    color:#DE4B1B;
    text-decoration:none;
    margin:0;
    padding:0;
    }




    #navbar
    {
    margin:0;
    text-decoration:none;
    padding:0;
    background-color:black;
    }

    #navbar li
    {
    font-size:22px;
    float:left;
    display:inline,block;
    padding:0;
    text-decoration:none;
    }

    #navbar a:link, #navbar a:visited
    {
    border:10px solid black;
    background-color:black;
    color:white;
    }

    #navbar a:hover, #navbar a:active
    {
    border:10px solid black;
    background-color:black;
    color:#DE4B1B;
    }

    #navbaron a:link, #navbaron a:visited
    {
    border:10px solid white;
    background-color:white;
    color:black;
    }

    #navbaron a:hover, #navbaron a:active
    {
    border:10px solid white;
    background-color:white;
    color:#DE4B1B;
    }

    HTML:

    <html>

    <head>

    <title>
    Home
    </title>

    <link rel="stylesheet" type="text/css" href="basic.css" />

    </head>

    <body>

    <div class="mainContainer">

    <h1 class="mainHeader"><a href="index.html" /><img src="images\headerLogo.jpg" title="Home" border="0" /></a></h1>

    <div id="navbar">

    <ul>
    <li> <div id="navbaron"> <a href="index.html">Home</a> </div> </li>
    <li> <a href="about.html">About</a> </li>
    <li> <a href="portfolio.html">Portfolio</a> </li>
    </ul>

    </br></br></br>

    </div>

    <h2>Home</h2>

    <p>Hello world!! <a href="http://www.google.com">google!</a></p>

    </div>

    </body>

    </html>

  2. #2
    FrankC's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2011
    Posts
    13

    Re: Navigation bar problems

    Would this tutorial help?:

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

    Just paste it into the browser address bar.

  3. #3
    FrankC's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2011
    Posts
    13

    Re: Navigation bar problems

    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>
    Last edited by FrankC; 10-07-2011 at 05:33 AM.



Tags for this Thread