center a horizontal nav bar

I see you have solved the centering problem but in my opinion, the items are much easier to read if they are aligned to the left. Centering each menu item looks a bit hard to read and I develop websites all day long for a job. however, it is up to each designer how they like their menus to look. I'm just telling you how my clients like their menus so perhaps you should consider that? Of course you don't have to....

If you are still not happy with your menu and the look of that top banner area, let me know what you want and I will write the CSS and html for you.

I still would like to get it center, and your opinion on what if anything I should do to make it look more like a dropdown menu.  I thought about putting a line between them or perhaps a carrot (down arrow) next to them so that people would recognize it better as a dropdown menu.  What are your thoughts?

Personally I like pipes " | " between horizontal menu items. It looks tidy. On the actual drop down menu items, if they have another flyout menu to those items you could put a " > " arrow on the right hand side of them to let people know there is another menu attached to those items. Like this

HOME | ABOUT US | PICTURES | BLAH BLAH
              Who we are
              Our Staff  >
                                  John
                                  Wendy
                                  Richard

Something like that would look wuite nice and tidy perhaps?

Your topnavbar is still aligning to the left and I don't see any "float:left" rule anywhere for that element. I can see that is is set at 100% width and that is working properly so perhaps you could add a line like this:

text-align:center;

to that element to get everything back into the center as text-align is automatically left by default. See if that helps. If not, please post your CSS and I'll see if i can find why it is aligning to the left but try my suggestion first.

I put in the text-align:center;  but it didn't make a difference.  I want the dropdowns to remain left aligned, but the title's on the blue nav strip to be centered.  I also want the blue strip to extent to 100% of the screen.

http://insurance.illinois.gov/dropdown/menu.html

Ok looks like you have made progress now, well done. I'm glad you took my advice on left aligning the dropdown menu items. It looks so much nicer and easier to read I think. So now the blue strip IS extending to the full width of the banner and the dropdown items are left aligned, AND the top menu titles are centered within their respective windows. So what is left to do now? Do you want the whole menu to slide to the center? or are you going to keep it on the left?

If you want to put the entire menu to the center, put all of the contents (the menu titles AND dropdown menu items) inside another div and align it to the center. Like this:

#menu-container
{
position     :relative;
text-align   :center;
padding     :0px;
width         :1250px; /* change width and height to suit the menubar size. Give it hard coded sizes */
height        :20px;
}


Now in your page add this

<div id="menu-container">
<!-- put all of your menu information inside this div as this div will align it's content to center -->
</div><!-- end of menu-container div -->

Nope, it didn't work.  This is what it looks like now.  Also, how do I stop the header from wraping when the browser window is made smaller.

http://insurance.illinois.gov/dropdown/menu2.html

I'm out of the office 4 a couple of hours so will look at it when I return. might be time to post ur entire page and your CSS sheet so I can duplicate the problem and fix it

smitty62: you didn't do as I said. you added some stuff to my suggestion code and that is why it's not working.

Remove "float:right" from the code for TopNavBar div.
Also, remove "width:1000px" - that line is limiting the menubar width to 1000px and you want it to fill the width entirely right? Remove it or make it the measurement of the full width like 1264px or whatever the full width is.

I won't be able to offer any more help on this question unless you are willing to do what I have asked several times now and that is post your full page code, and your full CSS sheet so I can make a clone of it and get it centered. Guessing is to hard. Try doing as I suggested in this post though, that will put it back to full width 100% a\t least.

The main problem now is you are missing the <center> tag in your HTML document. After the <body> tag you must use a <center> tag to have everything that is not floated, centered. Perhaps you removed it by mistake?

Sorry, I thought you would be able to grab the page from a view source.  I didn't notice the paper clip below until now.  I do thank you for you patience with me, and yes it is centered now.  I just have one more problem to resolve.  How do I get the header NOT to wrap when I shrink the browser window?  I imbeded the CSS into the html file for you.  Thanks.
menu2.html

smitty thanks for attaching the code. Yes I can view page source but to view the CSS I have to open developer tools and even then it is hard to change the values so it's better to attach the CSS so I can modify it and see instant results.

The wrapping problem is being caused by the topnavbar set to width:100%. If you can stomach setting a page width for the project (I do this) then change the width:100% to width:1024px (or give it a higher width depending on your page content. 1024px is a good standard width for a website and cover most monitors.

The menu will stop wrapping and start adding a horizontal scroll bar when the user reduces the window width. Does that solve your issue?

WOW! That worked good.  I'll have to adjust the middle banner, but just one little thing.  I noticed when I made the change that the top nav bar shifted to the right, and the bottom nav bar shifted to the left.  Is there some way I can get rid of all the white space on the top and sides of the header.

http://insurance.illinois.gov/dropdown/menu3.html

Thank you for all your help.

No probs. your test link still shows the floating left and right problems still aren't fixed but if you put everything inside the #page div and center that, then nothing will float outside of it.

#page
{
position:relative;
width:1024px; /* or whatever your main width will be */
overflow:hidden; /* this line is important */
}

So your page should look like this

<html><head><title></title>
<!-- all your CSS inserting code here or link to external style sheets here
</head>
<body>
<center>
<div id="page">
<!-- now put all your code for the entire page inside this main div. Everything will be 1024px max wide and nothing will float outside of this width. Make all your menus the same width 1024px for eg. so they take up the entire width. add text-align   :center; to any elements you want the text to align to the center. This will also float any images or other content to the center unless those elements have their own set of CSS rules.

</div><!-- end of page div -->

hope this helps and thanks for the points.