sains1994 sains1994 - 6 months ago 7
CSS Question

When adding a second css tag to center the page, why does the navigation bar not move with the rest of the page?

I am trying to achieve a fully centered page, however when I add CSS code to center it, the navigation bar does not move. It only moves when i remove its tags. This is my original code. The nav bar works as it should. (buttons are green, lined up properly, however all items are left justified.

<!DOCTYPE html>
<html lang="en-us">
<body bgcolor="black">
<head>

<link rel="stylesheet" href="style.css">
<title>Title</title>
</link>

<img src="img.png"></img>

</head>

<body>
<div id="menubar">
<ul
<li><a href="item1.html">page 1</a></li>
<li><a href="item2.html">page 2</a></li>
<li><a href="item3.html">page 3</a></li>
<li><a href="item4.html">page 4</a></li>
</ul>
</div>
</body>

<body>

<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>

<div id="items">
<ul>
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
</ul>
</div>
</a>
</body>
</body>
</div>
</html>


Heres the original CSS.

#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
float: left;
margin-right: 0.5em;
}


To center the page, i add the following css code:

body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
{
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}


And added these lines at the beginning and end of the page.



If you try out the code, the entire page centers EXCEPT the nav bar. As you can probably tell, I am fairly new to this.

Answer

Works for me. The only problem is that your code structure. Your code format should be

body {
    margin: 0;
    padding: 0;
    padding-top: 10px;
    text-align: center;
}
#menubar {
    width: 800px;
    text-align: center;
    border: 0px;
    padding: 0px;
    margin: 0 auto;
}

#menubar ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#menubar a {
    display: block;
    width: 8.5em;
    color: black;
    background-color: #7FFF00;
    text-decoration: none;
    text-align: center;
}
#menubar a:hover {
    background-color: 6666aa;
}
#menubar li {
    display: inline-block;
    margin-right: 0.5em;
}
<!DOCTYPE html>
<html lang="en-us">
    <head>

        <link rel="stylesheet" href="style.css" />
        <title>Title</title>
    </head>
    <body bgcolor="black">
        <div id="menubar">
            <ul>
                <li><a href="item1.html">page 1</a></li>
                <li><a href="item2.html">page 2</a></li>
                <li><a href="item3.html">page 3</a></li>
                <li><a href="item4.html">page 4</a></li>
            </ul>
        </div>

        <a style="color: #7FFF00">
            <pre> </pre>
            <p>Some text</p>
        </a>

        <div id="items">
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
            </ul>
        </div>
    </body>
</html>