CSS Navigation Problem

[falp1004]

Hi everybody,

I spent the whole weekend trying to figure out why my menu isn't centering properly. I followed a tutorial to create a menu with list items found in this forum (sorry but I can't remember where). The menu works perfectly but is not align correctly. Could anybody please help me?

The link is

http://www.falp.net/website/pages/start.htm

Thanks a lot

Frank

[DaveMaxwell]

Try changing the margin on your #navcontainer to margin: 0 auto; and see if that helps.

[Paul O'B]

Hi,

The problem is that you haven't targeted the element correctly.

You have used #navlist ul but there isn't an ul in an id of navlist. However there is a ul that has an id of navlist.

Therefore changing your code as follows should (?) sort the problem.

 ul#navlist  {
 margin:0 0 10px 0;
 padding: 0;
}

However I must point out that you are using quirks mode in IE and using text-align:center to center all your elements. This is fine for IE (and IE6 in quirks mode) but other browsers obey the rules and only use text-align:center to centre text not nested elements.

For other browsers you will need to use margin-left:auto and margin-right:auto on a fixed width element to allow it to centre.

Hope this helps.

Paul

[falp1004]

Hi,

The problem is that you haven't targeted the element correctly.

You have used #navlist ul but there isn't an ul in an id of navlist. However there is a ul that has an id of navlist.

Therefore changing your code as follows should (?) sort the problem.

ul#navlist {
margin:0 0 10px 0;
padding: 0;
}

However I must point out that you are using quirks mode in IE and using text-align:center to center all your elements. This is fine for IE (and IE6 in quirks mode) but other browsers obey the rules and only use text-align:center to centre text not nested elements.

For other browsers you will need to use margin-left:auto and margin-right:auto on a fixed width element to allow it to centre.

Hope this helps.

Paul

Thanks for your prompt replies. It didn't quite work but I think I fixed it now. I changed from id to class targeting and it seems to work.

I will work on the centering to make it more compliant.

Thanks again.

[Paul O'B]

It didn't quite work

It did in my version ! You must have copied something incorrectly.

Changing the id to a class would make no difference (except for the inherrent differences of course). It would have no effect on the targetting - both class and Id would work. The only difference with an Id is that you can only use it once uniquely on a page. (However at this point in time all browsers ignore this and display it just like a class, although you would have prooblems if javascript routines targetted it etc.)

You had #navlist ul in your code which will look for a an unordered list that is within an id of navlist.
e.g.
This is what that would need to look like to work:

<div id="navlist">
<ul><li></li></ul>
</div>

But what you had was:

<ul id="navlist">
<li></li>
</ul>

There is no unordered list within the id of navlist. There is however, an unordered list thas has an id of navlist which would need to be targetted differently as follows.

 
ul#navlist

Which means look for ul that has an id of navlist - thats the difference from the first example. Changing the id to a class or vice-versa would make no difference.

Just thought I'd clear that up

Paul

[falp]

I apologize. You were absolutely right. I did make a mistake. I put ul #navlist instead of ul#navlist the space being the crucial difference. I tried it out and is was absolutely fine.

Thanks for everything.