76 users online (0 members and 76 guests)  

> > > > Navigation bar problems

  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. 02-13-2011, 09:30 PM #1
    hyper42
    hyper42 is offline
    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>
    Reply With Quote Reply With Quote
  2. 10-07-2011, 04:17 AM #2
    FrankC
    FrankC is offline
    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.
    Reply With Quote Reply With Quote
  3. 10-07-2011, 05:28 AM #3
    FrankC
    FrankC is offline
    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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread