My entire body and footer become links from my nav bar (html/css)

Question

I am having a problem with my css on a website page I am making. It seems that the entire body and footer of my page become a link to one of my navigation bar options. I'm thoroughly stumped on why this is happening.

/* CSS Document */

#containter {
    width: 900px;
}

#body {
    width: 350px;
    float: left;
    padding: 10px;
}

#nav {
    float: left;
    width: 203px;
    height: 400px;
    background-color:#f1f1f1;
    border: 1px solid #black;
}

#footer {
    clear: both;
    background-color:#f1f1f1;
    padding: 10px;
}

h2 {
    font-family:arial, helvetica, sans-serif;
    font-size: 2.3em;
    padding: 15px;
}

hr {
    color: grey;
    border-width: 5px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color:#f1f1f1;
    border: 1px solid black;
}

li {
    text-align: center;
    border-bottom: 1px solid black;
    font-family: arial;
    font-size: 18px;
}

li a {
    display: block;
    color: grey;
    padding: 0px 16px;
    text-decoration: none;
}

li:last-child {
    border-bottom:none;
}

li a.active {
    background-color: #grey;
    color:black;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

.header img {
    float: left;
    width: 120px;
    height: 70px;
}

.header h1 {
    position: relative;
}

<!DOCTYPE html>

<html>
<head>
<title>Staff</title>

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

</head>

<body>

<div id="container">
    <div class="header">    
        <img src="http://i.imgur.com/Oz0Z7NG.gif" alt="Spinning Globe">
        <h2>Company, Inc.</h2>
    </div>
    <hr>

    <div id="nav">
        <ul>
            <li><a href="#home">Home</li>
            <li><a href="#aboutus">About Us</li>
            <li><a href="#staff">Staff</li>
            <li><a href="#contactus">Contact Us</li>
        </ul>
    </div>

    <div id="body">
        <p>
        body.
        <p>
    </div>
 
    <div id="footer">
        footer.
    </div>

</div>

</body>

</html>

Flagged to close for being a simple syntax/typographical error. — Jonny Henly, Jul 08 '16 at 05:23
Why did you edit the question to fix the code that was the reason for the question? Consider adding an answer (or reading the already posted answers) next time. @AvanishKumar — Jonny Henly, Jul 08 '16 at 05:30
@JonnyHenly I edit because he didn't check code before posting question. If he check code before positing may be work fine. Both answer write same think that's why i don't want write same think. Sorry for that. Sorry for my english. — A.K., Jul 08 '16 at 06:39

score 1 · Answer 1 · answered Jul 08 '16 at 05:21

You need to close opened <a> tags in #nav > ul

<div id="nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#staff">Staff</a></li>
        <li><a href="#contactus">Contact Us</a></li>
    </ul>
</div>

score 0 · Answer 2 · answered Jul 08 '16 at 05:48

In your code you did not close the anchor tags

Try this:

    <div id="nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#staff">Staff</a></li>
        <li><a href="#contactus">Contact Us</a></li>
    </ul>
    </div>

My entire body and footer become links from my nav bar (html/css)

2 Answers2