Resolved Nav bar not centering over container Div.

kamandskye · 03-02-2012, 09:53 AM

For the life of me I cannot get my Navigation bar to center on top of my container div. I would like to keep the edges lined up evenly if possible.I am a first quarter student so any tips and pointers or resources would be helpful as well! Any-who, here is the link - CLICKY

.

The Code is as follows
Html

Code:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Let Them Paws Run</title>
</head>
<body>
    <div class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="pitbulls.html">Pitbulls</a></li>
        <li><a href="bsl.html">BSL</a></li>
        <li><a href="media.html">Media</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div id="container">

<div><h1 id="header"><span><img src="images/doglogo.jpg" width="960" height="125" alt="Let Them Paws Run Logo"></span></h1></div>

<hr />
<h1>Pitbulls...</h1>
<p style="text-align:center">Pitbulls (and other dogs) are wrongly misjudged. My first real awakening to this was when I watched
the video "The Pitbull Problem" by <a href="http://www.youtube.com/user/freakhyena/feed">Z</a>(below). I have been
around and owned Pitbulls for the last 13+ years of my life and have not been around any bad ones that were raised
properly. Even the few that did have bad owners were able to overcome their fears and insucurities and become
perfectly acceptable family pets. I would never trust another dog around my 2 year old daughter as I do a Pitty.
Slighty in doubt? Knowledge is key. Please view the video below, and browse around the sight for more information
and arguements on why I feel you should "Ban the Deed, Not the Breed."</p>

<table style="margin:auto; border-style:solid; border-color: rgb(101, 197, 246); border-width:5px;">
    <tr>
    <td><iframe width="480" height="360" src="http://www.youtube.com/embed/xeuy_PBlqz8" frameborder="0" allowfullscreen></iframe><td>
    <tr>
</table>



</div>
</body>
</html>

css

Code:

a {
    color: rgb(101, 197, 246)
}
a:visited {
    color: rgb(69, 136, 171)
}
a:active {
    color: rgb(74, 79, 82)
}
body {
    background-color: rgb(101, 197, 246)
}
h1 {
    color: rgb(101, 197, 246)
}
p {
    color: rgb(95, 94, 94)
}
#container {
    width: 980px;
    height: 900px;
    margin: 0 auto;
    background-color: white;
    float: none;
    overflow: scroll;
    clear: both;
}
#header {
    text-align:center;
    padding: 0;
    margin: 0;
}

.menu {
    margin:auto;
    width: 960px;
}
.menu ul{
    font-family: "Arial";
    font-weight: bold;
    font-size: 13px;
    margin: 0;
    padding: 0;
    height: 20px;
    list-style-type: none;
    text-align: center;
}

.menu ul li {
    list-style:none;
    display: inline;
}

.menu ul li a{
    padding: 0.5em;
    text-decoration: none;
    float: left;
    color: white;
    background-color: rgb(101, 197, 246);
    border-color: rgb(101, 197, 246);
    border-style: none
}
.menu ul li a:hover {
    background-color: white;
    color: rgb(101, 197, 246);
}
.menu ul li a:active {
    background-color: rgb(69, 136, 171);
}

Again, thank you for the help! Hopefully I didn't mess it up to terribly. Haha.

Kam

SB65 · 03-02-2012, 10:28 AM

Remove the float from .menu ul li a.

dan-dan · 03-02-2012, 11:03 AM

Do what SB65 said.

Now that you don't have it floated you can also remove clear: both; in #container

Also, removing the float now has your top links padding overflowing into the main container below.
Add position: relative; to #container to resolve this.

kamandskye · 03-02-2012, 04:41 PM

Thanks much guys! Tried fixing it for hours. You guys saved me major headache =] <3!