Centering the navigation bar

**dburdon** · 01-12-2006, 02:43 AM

From advice on the forum I've constructed a navigation bar that changes the colours of the buttons on mouseover. Now I'd like to "center" the bar to ensure it always remains mid-screen regardless of the screen resolution.

See http://www.simplyclicks.com/Testing.html

Any help would be welcome.

**Masetek** · 01-12-2006, 03:10 AM

Originally Posted by dburdon

From advice on the forum I've constructed a navigation bar that changes the colours of the buttons on mouseover. Now I'd like to "center" the bar to ensure it always remains mid-screen regardless of the screen resolution.

See http://www.simplyclicks.com/Testing.html

Any help would be welcome.

Easy

Wrap the list in <div style="text-align: center;"></div>

Or extend the div that your header image is in to wrap around it.

**dburdon** · 01-12-2006, 03:18 AM

DPM Media,

thanks. I'll give it a try.

**agua** · 01-12-2006, 03:26 PM

I'd try this:

Code:

#nav {
width: 570px;
margin-right: auto;
margin-left: auto;
}

and wrap your whole ul tag (and all inbetween) like this

Code:

<div id="nav"><ul>....</ul></div>

I think the text align:center won't work because you have float lefts in your nav css code, so you need to specify a width for the element and center it using margins.

It would be much easier if text-align:center worked IMO - but hey.

**James** · 01-12-2006, 04:04 PM

You need text-align: center; around the containing div of an element which is centred using margin-left: auto; margin-right: auto;. Internet Explorer doesn't centre using margin-left and right.

**dburdon** · 01-12-2006, 05:11 PM

Agua, James,

thanks for the advice.

Any help you need on anything commercial, let me know.

Regards,

David Burdon

**Masetek** · 01-12-2006, 06:51 PM

Originally Posted by James

You need text-align: center; around the containing div of an element which is centred using margin-left: auto; margin-right: auto;. Internet Explorer doesn't centre using margin-left and right.

Damn annoying that.

**agua** · 01-12-2006, 06:54 PM

Yeah - internet explorer is annoying regards css - has anyone tried the new version, 7 I think?

**Masetek** · 01-12-2006, 07:12 PM

Originally Posted by agua

Yeah - internet explorer is annoying regards css - has anyone tried the new version, 7 I think?

It's not out yet. But *apparenty* all the current css bugs will be fixed. That's not to say your problems will be over once its out, it will take ppl ages to upgrade..

Edit: Sorry, my bad. I was reading an outdated blog. Its out for dev testing.

BTW, this is the first page Ive seen with PR10
http://www.microsoft.com/windows/ie/default.mspx