troubleshooting layout issues with horizontal menu

[kootenayit]

I've been struggling with the horizontal menu on the site www.humannavigator.com.  I can't get the menu to automatically resize based on the browser window size, so it lines up with the header.  Also, why is the menu indented from the left margin? I've just upgraded CMSMS to the latest version, so don't think that's what causing the trouble.  I've included the code from my Template, Menu Manger and Stylesheet - hopefully someone can help sort it out for me as I can't seem to find where I've messed up!

Here's the code from the Template:




{title}
{metadata}
{stylesheet}













{cms_module module='menumanager' template='HumanNavNew'}




{content}

{global_content name='footer'}







Here's the code from the Menu Manager:

{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}{/foreach}

{repeat string="" times=$node->depth-1}


{/if}


Here's the code from the Stylesheet:

html {
background-image: url(uploads/images/right_side.gif);
background-repeat: repeat-y;
background-position: top right;
}

body {
margin: 0;
font-family: Trebuchet MS;
font-size: 10pt;
background-image: url(uploads/images/left_side.gif);
background-repeat: repeat-y;
color: #000000;
}
#container {
width: 800px;
display: inline;
             margin-left: 5px;
             margin-right: 5px;
}
#main-title {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;

font-size: 9px;
letter-spacing: 5px;
text-align: right;
margin-top: 0;
padding-bottom: 12px;
font-weight: bold;
padding-top: 8px;
padding-right: 0px;
background-color: #000000;
color: #375ba9;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}


#header-image {
background-color: #375ba9;
background-image: url(/uploads/humannav/hn_banner.gif);
background-repeat: no-repeat;
background-position: left top;
height: 121px;
border-top: 2px #ff6600 solid;
border-bottom: 2px #ff6600 solid;
margin-left: 110px;
margin-right: 110px;

}

#navbar {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
width: 100%;
font-size: .65em;
text-align: left;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
background-color: #000000;
color: #ffffff;
word-spacing: 8px;
border-bottom: 0px #ff4600 solid;
}

#navbar a:link, #navbar a:visited {
color: #ffffff;
word-spacing: none;
}

#navbar a.current {
color: #ff4700;
}

#navbar a:hover {
color: #ff4700;
text-decoration: underline;
}


#headline {
font-size: .65em;
padding-top: 30px;
background-color: #f2f2f2;
text-align: justify;
padding-left: 100px;
padding-right: 100px;
margin-left: 110px;
margin-right: 110px;
margin-bottom: 0;
line-height: 1.5em;}


p.byline {
text-align: right;
margin-bottom: 0;
}

h1 {
margin-left: 50px;
margin-right: 50px;
font-size: .8em;
padding-bottom: 3px;
padding-top: 23px;
border-bottom: 1px #ff6600 solid;
letter-spacing: 5px;
font-weight: bold;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}


#main-text {
margin-top: 0;
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: 10pt;
font: Trebuchet MS;
line-height: 1.8em;
}

#main-text p {
margin-left: 50px;
margin-right: 50px;
}

#main-text news {
margin-left: 50px;
margin-right: 50px;
}

h2 {
padding-bottom: 3px;
padding-right: 0;
color: #000000;
border-bottom: 1px #000000 solid;
letter-spacing: 5px;
margin-left: 50px;
margin-right: 50px;
font-size: 1em;
margin-top: 0;
padding-top: 10px;
}

p, ul, ol, table {
margin-top: 0px;
margin-bottom: 0;
}

ol, ul {
margin-left: 75px;
margin-right: 75px;
}

a:link, a:visited {
text-decoration: none;
font-weight: bold;
color: #375ba9;
}

a:hover {
text-decoration: underline;
}


#footer {

margin-bottom: 0;
padding-top: 2px;
padding-bottom: 2px;
font-size: 9px;
text-align: center;
margin-top: 10px;
padding-right: 0px;
background-color: #000000;
color: #ffffff;
border-top: 2px #ff6600 solid;
border-bottom: 2px #ff6600 solid;
}

#footer a:link, #footer a:visited {
color: #ffffff;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
color: #ffffff;
}
.right {
float: right;
text-align: right;
width: 50px;
}
.left {
float: left;
text-align: left;
padding-left: 50px;
}
.right h3 {
margin-top: 0px;
font-size: 90%;
}

.stretch,
.clear {
clear:both;
height:1px;
margin:0;
padding:0;
font-size: .7em;
line-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}

/* end clearing */


/* replace */
.replace {
display:block;

background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
/* tidy these up */
.replace * {
text-indent: -10000px;
display:block;

background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
.replace a {
text-indent:0;
}
.replace a span {
text-indent:-10000px;
}
/* end replace */


/* accessibility */
     span.accesskey {
      text-decoration:none;
     }
     .accessibility {
      position: absolute;
      top: -999em;
      left: -999em;
     }
dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper clears the floating elements of the menu */

#menuwrapper {
        overflow: hidden;
        background-color: black;
        border-bottom: 1px #ff6600 solid;
        font-size: .85em;
        font: Trebuchet MS;
        margin-left: 110px;
        margin-right: 110px;
       
        color: white;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li {
        width: 200px;

       }


/* Unless you know what you do, do not touch this */

#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}

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

/* Styling the basic apperance of the menu elements */

#primary-nav a {
display: block;
margin: 0px;
padding: 4px 10px;
text-decoration: none;
             color: white;
}
#primary-nav li a {
border-right: 1px #ff6600 solid;
border-left: 1px #ff6600 solid;
        color : white;
}
#primary-nav li li a {
border: 1px #ff6600 solid;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: black;
        color : white;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
background-color: black;
        color: red;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
          color: red;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: black;
        color : red;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
          color: red;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}

/* IE Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}

[Dr.CSS]

It's the width in menu manager...

[kootenayit]

Thankyou, I had missed the one width setting in menu manager .  Do you know why the first nav item (home) is indented?

Marilyn

[RonnyK]

I see,

Code: Select all

#menuwrapper {

        overflow: hidden;

        background-color: black;

        border-bottom: 1px #ff6600 solid;

        font-size: .85em;

        font: Trebuchet MS;

        margin-left: 110px;

        margin-right: 110px;

        color: white;

}

It might be the margin-left causing the indent.

Ronny

[Nullig]

From your source:



 


Also, in case you haven't noticed, if you view this site on a wide-screen display, it looks totally out of whack.

Nullig

[Dr.CSS]

All size/style calls should be done in the CSS... All div IDs should only be used once...