CSS Menu - Horizontal, can it be centered?

[anthonyh]

Hi,

I've been tinkering with CMSMS a bit, and I was wondering how I would go about centring the CSS horizontal navigation menu items.  Is this easy to do?

Here is my CMS site: http://cms.hhsn.net/
Here is the old site: http://www.hhsn.net/

I would like to center the menu as I have it centered on my old site.  Of course, the old site is using zero CSS, as I am learning as I tinker with CMSMS. 

Thanks!

[Caspar]

All you can do is add a specific width to parent and child list items, since the menu items are based on a list with floated items.
Check your menu stylesheet for:

Code: Select all

#primary-nav li { 
   margin-left: -1px;
   float: left; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative;
}

and add:

Code: Select all

#primary-nav li { 
   margin-left: -1px;
   float: left; 
width:8em; /* that's an example, you can also use px */
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative;
width:8em; /* same as above */ 
}

Please be aware that too long menu texts would smash it. And I'm not sure how it'll look in IE...

Regards,
Caspar

EDIT: If that's it for you, please edit your initial post and add [SOLVED] to its header. Thanks!

[Nullig]

What I did to center mine was to change the style for the menuwrapper div:

Code: Select all

#menuwrapper { 
   /* Fix for Opera 8 */ 
   /* overflow: hidden; */
   background-color: #ECECEC;
   border-bottom: 1px solid #C0C0C0;
   margin: 0 0 0 23%; <-- you will have to play with the percentages here -->
   width: 75%;           <-- and here, making sure the total is less than 100% -->
   text-align: left;
}

Then I put the menuwrapper div within another div with the same background color in my template:

Code: Select all

<div style="background-color: #ECECEC;width: 100%;">
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
      {menu template='cssmenu.tpl'}
   <hr class="accessibility" />
   </div>
</div>

Nullig

[polyploidal]

I've found a way to have the menu center without having to specify a width.  It involves a few css tricks since IE doesn't recognize display:table - but it does work.

here's the html:

Code: Select all

   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
      {menu template='simple_navigation.tpl'}
   </div>

Here is the css.  Notice the display: table in div#menu_horiz ul

Code: Select all

div#menu_horiz ul {
   margin: 0;
   padding: 0;
   display: table;
   margin: 0 auto;
}
/* menu list items */
div#menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0;
}

/* the links, that is each list item */
div#menu_horiz a {
   padding: 0 2em 0 2em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #fff;
   display: block; 
}

/* hover state for links */
div#menu_horiz li a:hover {
   color: #fff;
   text-decoration: underline;
   background-color: #434548;
}

div#menu_horiz a.activeparent:hover {
   color: #b2d235;
}

/* active parent, that is the first-level parent of a child page that is the current page */
div#menu_horiz li.activeparent a {
   color: #b2d235;
   background-color: #2E3135;
}

div#menu_horiz h3 {
   padding: 0 2em 0 2em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #b2d235;
   background-color: #2E3135;
   display: block; /* IE has problems with this, fixed above */
   font-size: 12px;                           /* instead of the normal font size for <h3> */
   font-weight:normal;
}

And here is the conditional css I used to fix the issue with IE not recognizing display: table

Code: Select all

<!--[if IE ]>
<style type="text/css">
div#menu_horiz ul{display:inline-block;}
div#menu_horiz ul{display:inline; }
div#menu_horiz ul li{display:inline-block;}
div#menu_horiz ul li{ display:inline;}
div#menu_horiz ul a{ display:inline-block;}
div#menu_horiz {text-align:center;}
</style>
<![endif]-->

I hope this helps

[snatrott]

I tried the last suggestion, and it worked in FireFox but not in IE. I added the IE fixes in my main template along with what was already between the tags. Did I miss something critical?

The only changes I made to the menu stylesheet was the display: table; under div#menu_horiz ul

Thanks.

[polyploidal]

I'm not sure why it's not working for you.  Try double checking that your class names again and make sure they are the same for both your main stylesheet and IE overrides.
If you want to post come of your code I'd be glad to help.

[izzysanime]

It was not able to work for me in IE either, I just gave up, because I hate IE anyways, I just put an IF IE statement with regular text links.  I know it wont solve the problem, but I had planned on moving to a flash menu or something anways in the future.


links here....


--
my site - http://www.wareriver.com