Center Navigation

You’re not really going to be able to centre the nav bar effectively whilst you’re using float:left; on the individual list items. Best suggestion I can offer is to set a percentage width on the nav ul and try centering that:

#navigation ul {
width:90%;
margin:0 auto;
}

You might also want to try dropping the line-height on that same ul to bring the nav tab lines closer together and reduce the slightly scrappy look. Try a line-height of 1em at first and then increase by .1em increments until it looks right.

Longer term, though, your teacher is going to have use shorter page titles. Two words are OK but anything more should be avoided if at all possible. Visitors just won’t read them properly.

Using the above code (with “#navigation ul li” instead of “navigation ul”)
produces a list with one menu tab per line.

So I shortened one of the navigation tabs to help everything line up better. There must be a better way! Why can’t we have long page titles?

I would also like to center the header and the body – any way to simply center everything?

Thanks!!!

Why can’t we have long page titles?

It’s not that you can’t. Just that the nav bar tabs will look so much better (and possibly be more user-friendly) with short titles.

I would also like to center the header and the body

For the header, try editing style.css and changing:

#header {
clear:both;
float:left;
margin:10px 5px;
width:760px;
}

to

#header {
clear:both;
float:left;
margin:10px 5px;
text-align:center;
width:760px;
}

Not sure what you mean by centring the body. The page is already centralised.

With your above mod to the css, only the subtitle is centered, which is a really nice touch.

But no change with the navigation. Any other suggestions?

Thanks for your assistance!