Centering the navigation bar

[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.

[Masetek]

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]

DPM Media,

thanks. I'll give it a try.

[agua]

I'd try this:

#nav {
width: 570px;
margin-right: auto;
margin-left: auto;
} and wrap your whole ul tag (and all inbetween) like this
<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]

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]

Agua, James,

thanks for the advice.

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

Regards,

David Burdon

[Masetek]

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]

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

[Masetek]

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

[James]

Knowing MS, they'll just make the most annoying bugs worse, and introduce new ones that weren't there before.

And same @ PR10.