CMS Made Simple Forums

Hi

I'm having trouble with the positioning of the menu items using the simple navigation vertical.
In the template file I have set
     
     
         Navigation
         {menu template='simple_navigation.tpl' start_level="2" collapse='1'}
     
     
I'm using the simple navigation vertical stylesheet which I have changed to my needs. Even changing the stylesheet back to the default one doesn't solve the problem.

As you can see on www.ilovemyislanddog.org the menu items are positioned way to far to the right. Which setting should I change to be able to align the first level menu item with the navigation title?

I've already tried several things but to no avail. It's probably a "stupid" setting so I hope someone can advise me how to get it fixed.

Other information:
CMSMS 1.1
Php 4.4.1
Mysql 4.1.11

Thanks for helping me out! And let me know if you need other information.

Thierry

It's so nice when there's a link...

#menu_vert ul{margin:0px;padding:0px}

This is the style sheet I'm using

#menu_vert {
  padding-left: 0;
  margin-left: 1em;
  padding: 0.5em 1.5em 1.5em 1em;
  border-bottom: 0.2em solid #7BA5C6;
  border-right: 0.2em solid #7BA5C6;
}

/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
  padding-bottom: 0.5em;
}

/* menu li block */
#menu_vert li {
  list-style: none;
  margin: 0;
  border-bottom: 1px solid #c0c0c0;
  display: block;
}

#menu_vert ul ul li {
  border: none;
}

/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/

/* first level links */
div#menu_vert a {
  text-decoration:none; /* no underline for links */
  display: block; /* IE has problems with this, fixed above */
  padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
  color: #18507C; /* this will be link color for all levels */
  background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
  min-height:1em; /* Fixes IE7 whitespace bug */
}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
  font-size: 90%;
  padding: 0.5em 0.5em 0.5em 2.8em;
  background-position: 1.5em center;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
  padding: 0.3em 0.5em 0.3em 4.3em;
  background: url(images/cms/dash.gif) no-repeat 2.8em center;
}

/* hover state for all links */
div#menu_vert a:hover {
  background-color: #C3D4DF;
}
div#menu_vert a.activeparent:hover {
/*  background-color: #C3D4DF;*/
  color: #18507C;
  font-style: italic;
}

/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
  background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
/*  background-color: #A5DDF8;*/
  color: #18507C;
  font-style: italic;
}

div#menu_vert ul ul li a.activeparent {
  background-position: 1.5em center;
  background-color: transparent;
  color: #18507C;
  font-style: italic;
}


/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
  background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
/*  background-color: #385C72;*/
  display: block;
  padding: 0.8em 0.5em 0.8em 1.5em;  /* some air for it */
  color: #18507C;                                /* this will be link color for all levels */
  font-size: 1em;                          /* instead of the normal font size for */
  margin: 0;                                  /* as normally has some margin by default */
}

/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
  font-size: 90%;
  padding: 0.3em 0.5em 0.3em 2.8em;
  background-position: 1.4em center;
  background-color: transparent;
  border-bottom: none;
  color: #000;   
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
  padding: 0.3em 0.5em 0.3em 4.3em;
  background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center;
}

/* section header */
div#menu_vert li.sectionheader {
  border-right: none;
  font-size: 130%;
  font-weight: bold;
  padding: 1.5em 0 0.8em 0;
  background-color: #fff;
  line-height: 1em;
  margin: 0;
  text-align:center;
}



/* separator */
div#menu_vert li.separator {
  height: 1px !important;
  margin-top: -1px;
  margin-bottom: 0;
  padding:2px 0 2px 0;
  background-color: #000;
  overflow:hidden !important;
  line-height:1px !important;
  font-size:1px; /* for ie */
}

div#menu_vert li.separator hr {
  display: none; /* this is for accessibility */
}

Cheers

Thierry

I know I went to your site, since you were nice enuf to leave a link to it, some times a request for help has no link and it's always easier to fix if there is one...

At the top of your CSS add the line... most all browsers add a margin to ul...

#menu_vert {
  padding-left: 0;
  margin-left: 1em;
  padding: 0.5em 1.5em 1.5em 1em;
  border-bottom: 0.2em solid #7BA5C6;
  border-right: 0.2em solid #7BA5C6;
}

#menu_vert ul{margin:0px;padding:0px}

/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
  padding-bottom: 0.5em;
}

Thanks Mark

That was it indeed.

Cheers

Thierry