Help centering a menu on a page

[satrina]

I have a menu on the top of my page, I can get it centered, but when I want is for the div that the entire menu is in to have a set max height and min width.

I don't want it to shrink when a user makes their browers smaller then 600 pixels wide, I would rather it just add the scroll bars for something that small instead of putting the contents on two lines. My problem is I get this effect when I use width: 50% in order to center it on the page. How should I be doing this to get the entire menu center like mentioned? Sorry I am really new to trying to use CSS!

Here is my CSS and html:

.topmenu {
  height: 26px;
  min-width: 500px; 
  width: 50%;
  margin-left: auto; 
  margin-right: auto;
  }
div.menubuttons {
  float: left;
  width: 92px; height: 26px;
  margin: 0 3px 0 0;
  background: url( 'http://www.aboutbeanies.com/Main/menu.gif' ) 0 -52px no-repeat;
  }
div.menubuttons a {
  display: block;
  margin: 0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  font: bold 13px/1 Georgia, serif;
  color: white;
  text-decoration: none;
  background: url( 'http://www.aboutbeanies.com/Main/menu.gif' ) top left no-repeat;
  }
div.menubuttons span {
  display: block;
  margin:0; padding: 5px 0 0 0px;
  }
div.menubuttons a:hover {
  background-image: none;
  text-decoration: none;
  color: white;
  font: bold 13px/1 Georgia, serif;
  }
div.menubuttons a:active {
  color: black;
  font: bold 13px/1 Georgia, serif;
  text-decoration: none;
  }
HTML:
_________________________________
<div class="topmenu">
  <div class="menubuttons"><a href=""><span>Home</span></a></div>
  <div class="menubuttons"><a href=""><span>News</span></a></div>
  <div class="menubuttons"><a href=""><span>Search</span></a></div>
  <div class="menubuttons"><a href=""><span>Forum</span></a></div>
  <div class="menubuttons"><a href=""><span>Email Me</span></a></div>
</div>

Thank you for any help anyone can provide!

-Marie

[createErrorMsg]

Your auto values for the left and right margins should do it. Try removing the 50% width and rewrite the margins as one margin property...
margin: 0 auto;
...the 0 sets top and bottom margins, the auto applies to left and right. In compliant browsers, that's all that's needed to center. You should add..
text-align: center;
...for IE's benefit, then explicitly set the button text to whatever text-alignment you need them to have.

If you try this and it doesn't work try two other things along with it...
1) If you can, give the menu div an explicit width in PX. This will force it to retain it's width no matter the size of the browser window (which you wanted) and may help with the margin centering thing. (Pure speculation, but worth a try.)
2) Try putting the menu div into a container, if it isn't already. This will give it something to base those equal auto div values off of (although it should use the html element if no other containers are available.)

This isn't in direct refernce to your question, but have you considered using an unordered list (<ul>) for your menu, rather than <div>s? It makes for more semantic code, is a little easier to work with, and (theoretically) makes search engines happier.

If you're interested in info regarding this practice, there's lots out there. Let me know and I can point you to some good resources.

[satrina]

Thanx again, I got it to make Mozilla and IE happy finally after reading your post.

I would love to see any references sites you have to point to, I am going to look into figuring out how to change to a list instead.

Thanx again!

-Marie

[createErrorMsg]

Here are a few good sites with info about using lists to make CSS menus...

listamatic [css.maxdesign.com.au] - THE place for css list menus
a list apart - (article called 'Taming Lists'.)