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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Bar Help

    I want my navigation bar to sit under my header (which fills the upper page) and have the links in the center and to highlight the area as a box when the mouse hovers over them.

    THIS IS ONLY FOR MY UNIVERSITY COURSEWORK, bad coding.

    heres my code:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

    <link rel="stylesheet" href="stylesheet.css">
    <title>Goetzs Theatre</title>

    <div id="header">
    <img src="mainheader.jpg"/>
    </div>
    </head>

    <body>
    <div id="navbar">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Shows & Times</a></li>
    <li><a href="#">Pictures</a></li>
    </ul>
    </div>
    </body>
    </html>


    CSS:

    #header {
    width:110%;
    margin-left:-20px;
    margin-top: 0;
    padding:0;
    height: 100%;
    position: relative;
    }

    #navbar ul {
    margin: 0;
    padding: 5px;
    list-style-type: none;
    text-align: center;
    background-color: #000;
    }

    #navbar ul li {
    display: inline;
    }

    #navbar ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #000;
    }

    #navbar ul li a:hover {
    color: #000;
    background-color: #fff;
    }




    I've got it from a website, but nothing seems to be happening even when I've saved notepad and opened it up within a browser. My links are still displayed as the default bullet pointed links.

    Appreciate help, Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jakewk7r,
    In your markup, the line: <link rel="stylesheet" href="stylesheet.css"> is incomplete. You need to specify a path that links to your .css stylesheet.


    As an example, this line quoted below links to a stylesheet named globalStyle.css that is located in the same directory as the .html file that's calling it -
    Code:
        <link rel="stylesheet" type="text/css" href="globalStyle.css">
    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the advanced reply window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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