Centering a navigation bar

straightcash

09-15-2011, 05:07 PM

Hi,
I'm having trouble centering a navigation pane on this page. The CSS looks like this:

body{
background-color:black;
margin:150px 300px;
border-style:groove;
border-width:5px;
border-color:white;
width:900px;
height:700px;
}
.title{
margin-left:auto;
margin-right:auto;
width:55%
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

And the HTML looks like this:
<body>
<div class="title">
<img src="Title Bar - New Guard Logo.png" alt="Title Heading" width="500" height="150"/>
</div>

<ul>
<li><a href="#index">The Mission</a></li>
<li><a href="#work">The Work</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#contact">The Contact</a></li>
</ul>

</body>
</html>

I've tried a bunch of ways to center it, but I know there is something simple I'm missing. Can anyone help me out?

Thanks!

sunfighter

09-15-2011, 05:35 PM

Your menu should be in a div like your Title Heading. You can make a seperate div for it or just move the </div> tag for the title class down to include them. But the class title width has to be extended to 57%.

But why body{margin:150px 300px;}?

straightcash

09-15-2011, 08:10 PM

Thank you, that was helpful. It's taking me a bit of time to get back into web programming. You don't like the margin sizes? It's what the designer wants, not me.

sunfighter

09-16-2011, 01:09 AM

The margin is an area outside the div. Your margins force the body down and to the right. Most pages like to have they're top-left corner at the top and left of the browser window not half way down the screen.

straightcash

09-16-2011, 05:24 PM

yeah, I'm aware. And the body is definitely not half way down the screen haha.

Kremlin

09-16-2011, 08:22 PM

I've been playing with your provided code, and it's really weird. I put it in it's own div and "margin:0 auto"-d the div, and it didn't center it. I think it might have to do with you having it in a list OR the fact that they're all displayed as blocks. I'll keep messing around, tell you if I find something.

Kremlin

09-16-2011, 09:22 PM

ok, i figured it out.

what you want to do, instead of making a list, is just use regular <a> links, unlisted, but give them all a class, like menu or something:

<a href="#index" class="menu">The Mission</a>
<a href="#work" class="menu">The Work</a>
<a href="#people" class="menu">The People</a>
<a href="#contact" class="menu">The Contact</a>

put them in a div, and in the div, have the text center-aligned.

now, in the css, you can set the background with a.menu {background-color:} and a.menu:hover {background-color:}

the one thing that will have to be different is that, now that they're not "display:block"s anymore, you can't have a set width of 120px. I don't know how to make inline elements have a set width -- and you DO want to keep it inline. What you can do, of course, is just increase the left and right padding in a.menu

--------------------------

OR you can do this cheat: put the whole menu in a div, figure out the exact width of your menu (in photoshop or something) and make that the width of the div, and in the div, do margin:0 auto;

BUT in the case that you want to change one of your Menu link titles, you'll have to go back again and figure out the width.