CSS menu being cut off by oter div

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
izzysanime

CSS menu being cut off by oter div

Post by izzysanime »

hi, i have tried the CSS menu and ellnav menu.  I have it in a DIV that has absolute position.  the menu breaks at the end of that position where it meats the next div.  Is this menu incompatible, should i change it to something else?  The Ellnav is very strange, because, even thought i want the horizontal one, it displays vertical, i noticed it when the page loaded, and the entire list was behind the other image.

check it out - http://wareriver.com/CMS/cmsmadesimple/ ... tent_types

thanks
Josh
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: CSS menu being cut off by oter div

Post by Dr.CSS »

are you more comfortable with table layout,, see a lot of it in your source?
what is in the template,,


    here


it looks like you are mixing the menu and the CSS from two diff. things,
the div id="menu_vert" is for a vertical menu try rename it to "menu_horiz" like it says in the CSS,,
and no reason to have this in the style sheet, those lines are for the in a template, with CMSMS you should already have {stylesheet} tag in the 'head',,





horizontal menu a few diff. ways www.multiintech.com/

  mark
izzysanime

Re: CSS menu being cut off by oter div

Post by izzysanime »

i had tried changing the vert to horiz, nothing changed.  I moved it into the same div, not exactly where i wanted it. 

 

        {cms_module module='menumanager' template='cssmenu-accessible.tpl'}       

     

and yes, it has {stylesheet}  in the head.  I had also tried ellnav, but it only displayed home, and the rest went down behind and over the content.  even though i choose horizontal

      Navigation
       
                  {cms_module module='menumanager' template="ellnav-accessible.tpl" number_of_levels='1'}
       

and no reason to have this in the style sheet,  - What it this?

thanks for your help
izzysanime

Re: CSS menu being cut off by oter div

Post by izzysanime »

but now, i get weird lines on the menus, and a line, that just goes across the menu to almost the end of the page.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: CSS menu being cut off by oter div

Post by Dr.CSS »

and no reason to have this in the style sheet,  - What it this?

when i looked at your CSS this,,





}
.style1 {
font-size: 14px;
font-family: Tahoma, "Lucida Grande";
border-top-style: none;
border-right-style: none;

and this,,

text-decoration: underline;
}



#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:683px;

this

body,td,th {
color: #000000;
font-size: 14px;
}



and at the bottom this,,

#primary-nav li li a {
height: 1%;
}
-->

the things in Blue

try pasting this into your menu CSS,, you can change what you need, i tried it on your site, it worked.


/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


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

#menuwrapper {

        background-color: #ECECEC;
        border-bottom: 1px solid #C0C0C0;
        width: 100%;
        }

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

#primary-nav{
        list-style: none;
margin: 0px;
padding: 0px; }

#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 {
background-color: #f2f2f2;
display: block;
margin: ;
padding: 4px 10px;
text-decoration: none;
}
#primary-nav li a {
/*ackground: url(uploads/images/grey.jpg); */
/*order-top: 1px solid #C0C0C0;*/
border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
      /*  background: url(uploads/images/blue.jpg);*/
border: 1px solid #e6e6e6;
      }
#primary-nav li{
/*ackground: url(uploads/images/grey.jpg); */
        }

#primary-nav li.menuparent {

}

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

#primary-nav li.menuactive {

}


/* 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 .amenuparent {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;

}

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

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
}


/* 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:hover ul ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul, #primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul, #primary-nav ul ul ul li.menuparenth ul {
display: block;
}


/* IE Hacks */

#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
izzysanime

Re: CSS menu being cut off by oter div

Post by izzysanime »

o, you mean put the css that i made (that is at the top of your post) and place it into the css file that holds the css for the menu?
I do currently have 2 different CSS files, the menu one, and the css for my page layout.

Its not a good idea to have them separate?
ill try what you said.

thanks
Josh
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: CSS menu being cut off by oter div

Post by Dr.CSS »

more than one CSS is ok, one should be called 'something'menu, if you goto Layout » Templates on the right side is a little icon to clik for CSS associated with the templte, look thru them till you get one that says,,

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

at the top,,
and paste what i posted from that same line down into the page, the rest of the stuff in blue is just some stray things in your CSS some where, it wont hurt, it's not really doing anything, just clutter

  mark
izzysanime

Re: CSS menu being cut off by oter div

Post by izzysanime »

awesome, thanks!

would that also solve the issue of the menu breaking when it enters the other div?

thanks
Josh
Locked

Return to “Layout and Design (CSS & HTML)”