Problem Centering Navigation Menu

reachingafrika · Post by **reachingafrika** » Sun Nov 20, 2005 5:33 am

Ok, so I've been using CMS Made Simple for about 1 year now and until recently I had been using the .10.3 and .10.4 builds. I downloaded the new .11 Beta5 and I am trying to learn CSS a little better. I finally did figure out how to center to logo at the top of the page, but I am trying to center the menu underneath the logo. I am using the navtop + 1 col template and so far the following code is what I have tried, but no matter what I do, it stays on the left hand side.

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
{embed header=true}

<!-- Type the title of your site here -->

<title>PhotoJoy Designs</title>
{stylesheet}
</head>

</__body>

<div id="page">

   <div id="header" class="clearfix">
                     

   </div><!-- end header -->

      <div id="menu_horiz" align="center">
         <div id="wrapper" align="center">
         {cms_module module='EllNav' horizontal=1 toponly=1 cssid='topmenu'}
         </div>
         <hr />
      </div>

      <div id="menu_vert">
         <h3>Menu</h3>
         {cms_module module='EllNav' cssid='leftmenu' showtoplevel=0}
      </div><!-- end nav -->

   <div id="content" class="clearfix">

      <div id="main">
         {content}
      </div>

      <!--div id="content2">
         <h3>2nd content block</h3>
         {content block='block1'}
      </div-->



   </div><!-- end content -->


   <div id="footer" class="clearfix">
      <p>© Copyright 2005 PhotoJoy Designs<br>Hosting By: PJD Hosting & Design</p>
   </div><!-- end footer -->

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

<div id="extra1"> </div>
<div id="extra2"> </div>

<__body>
</__html>

Also, I tried changing it in the nav-horizontal template as well using the following code but that did not work either.

Code: Select all

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* NAV */
	div#menu_horiz {
        font-size: 0.8em;
        text-align: center;
    }
    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
       background: #ddd;
    }
    div#menu_horiz ul {
        width: auto; 
        width: 100%;
                
        margin: 0;
        padding: 0;
        
        line-height: 1em;
        list-style: none;
    }
    div#menu_horiz li {
        float: left;
        
   
        list-style: none;
        
        margin: 0;
        padding: 0;
        
        line-height: 1em;
        border-right: 1px solid #aaa;
        text-align: center;
    }
    div#menu_horiz li.last {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: inline-block;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        font-weight: bold;
        text-decoration: none;
        
        margin: 0;
        padding: 10px 20px;
        
        color: black;
        background: #ddd;
    }
    div#menu_horiz a:hover {
        text-decoration: underline;
    }
    div#menu_horiz .active {
        display: inline-block;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
        color: white;
        background: black;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .active a,
    div#menu_horiz .active a:link,
    div#menu_horiz .active a:active,
    div#menu_horiz .active a:visited,
    div#menu_horiz .active a:hover 
{
       color: white;
       background-color: black;
    }
/* END NAV */

Here is the link to the website I am trying to update and change (http://www.photojoydesigns.com).

As you can see, I need the menu in the middle with a grey space on both the left and right, not just the right.

If anyone can help, it would be greatly appreciated.

westis · Post by **westis** » Sun Nov 20, 2005 9:07 pm

Hi reachingafrika,

You need to center the div that the menu is wrapped in. In this case that div has the id wrapper: . To center that div, margin-left and margin-right must be auto: margin: 0 auto; or margin-left: auto; margin-right: auto;. For some browsers, that ignore auto margins, you must also use text-align: center.

Also the width of that div must be equal to the width of your entire menu, which you must calculate by adding the width of each menu item.

So you need to add the following CSS to the stylesheet that the template is using (nav-horizontal or layout-navtop-1col):

Code: Select all

   div#wrapper {
      width: 650px; // or whatever the width of your menu is
      margin: 0 auto;
      text-align: center;
   }

Thanks to WiseQ for this.

reachingafrika · Post by **reachingafrika** » Mon Nov 21, 2005 2:01 am

Thanks westis,

Next question,

I changed the nav-horizontal template to reflect the following:

Code: Select all

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* NAV */
    div#menu_horiz {
        font-size: 0.8em;
        text-align: center;
    }
    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
       background: #000000;
    }
    div#wrapper {
      width: 490px; // or whatever the width of your menu is
      margin: 0 auto;
      text-align: center;
    }
    div#menu_horiz ul {
        width: auto; 
        width: 100%;
                
        margin: 0;
        padding: 0;
        
        line-height: 1em;
        list-style: none;
    }
    div#menu_horiz li {
        float: left;
        
   
        list-style: none;
        
        margin: 0;
        padding: 0;
        
        line-height: 1em;
        border-right: 1px solid #aaa;
        text-align: center;
    }
    div#menu_horiz li.last {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: inline-block;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        font-weight: bold;
        text-decoration: none;
        
        margin: 0;
        padding: 10px 20px;
        
        color: #FFFFFF;
        background: #000000;
    }
    div#menu_horiz a:hover {
        text-decoration: underline;
    }
    div#menu_horiz .active {
        display: inline-block;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
        color: white;
        background: #CE3A08;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .active a,
    div#menu_horiz .active a:link,
    div#menu_horiz .active a:active,
    div#menu_horiz .active a:visited,
    div#menu_horiz .active a:hover 
{
       color: white;
       background-color: #CE3A08;
    }
/* END NAV */

The next problem is that this only works in Internet Explorer, not Firefox, Camino, Opera, Etc.
Any Suggestions?

Also, if you look at the website http://www.photojoydesigns.com again, you will notice that the very first button/link which is "Home" does not have the grey bar on the left hand side. Do you know how to fix that as well?

Thanks.

Gibberish · Post by **Gibberish** » Mon Nov 21, 2005 5:39 am

That would be because there is no div to the left of Home. Since you are only telling the divs to put a border on the right. I would say either put a blank div and size it to 1 px or put a border-left on the div li's.

westis · Post by **westis** » Mon Nov 21, 2005 8:50 am

Reachingafrika,

You can set border-left: 1px solid #aaa; for div#menu_horiz ul, which is the entire first level of the menu (as it is an unordered list).

Hope that helps. Nice photos by the way!

reachingafrika · Post by **reachingafrika** » Mon Nov 21, 2005 3:17 pm

Thanks westis! That worked. The only other problem is the navigation menu is still not centering in Firefox, Opera, Camino, Etc. It only centers in Internet Explorer.

Any Suggestions?

I'll repost the code that I'm using for the nav-horizontal bar as well.

Code: Select all

/* NAV */
    div#menu_horiz {
        font-size: 0.8em;
        text-align: center;
    }
    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
       background: #000000;
    }
    div#wrapper {
      width: 490px; // or whatever the width of your menu is
      margin: 0 auto;
      text-align: center;
    }
    div#menu_horiz ul {
        width: auto; 
        width: 100%;
                
        margin: 0;
        padding: 0;
        
        line-height: 1em;
        list-style: none;
        border-left: 1px solid #aaa;
    }
    div#menu_horiz li {
        float: left;
        
   
        list-style: none;
        
        margin: 0;
        padding: 0;
        
        line-height: 1em;
        border-right: 1px solid #aaa;
        text-align: center;
    }
    div#menu_horiz li.last {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: inline-block;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        font-weight: bold;
        text-decoration: none;
        
        margin: 0;
        padding: 10px 20px;
        
        color: #FFFFFF;
        background: #000000;
    }
    div#menu_horiz a:hover {
        text-decoration: underline;
    }
    div#menu_horiz .active {
        display: inline-block;
        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
        color: white;
        background: #CE3A08;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .active a,
    div#menu_horiz .active a:link,
    div#menu_horiz .active a:active,
    div#menu_horiz .active a:visited,
    div#menu_horiz .active a:hover 
{
       color: white;
       background-color: #CE3A08;
    }
/* END NAV */

westis · Post by **westis** » Mon Nov 21, 2005 7:03 pm

Hi,

Not sure. But I see you have align="center" in the wrapping div in the template. Try removing that, as you center the div in the stylesheet. If that doesn't work I need to take a closer look at it.

reachingafrika · Post by **reachingafrika** » Mon Nov 21, 2005 7:50 pm

Westis - No Go

I removed the align="center" in the wrapping div in the template, but it made no difference. I even removed the align="center" in the menu_horiz div in the template, but again no difference. It centers fine in IE, but not firefox, opera, etc.

Thanks Again.

CMS Made Simple Forums

Problem Centering Navigation Menu

Problem Centering Navigation Menu

Re: Problem Centering Navigation Menu

Re: Problem Centering Navigation Menu

Re: Problem Centering Navigation Menu

Re: Problem Centering Navigation Menu

Re: Problem Centering Navigation Menu

Re: Problem Centering Navigation Menu

Re: Problem Centering Navigation Menu