Horizontal menu problem

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"
wientanz

Horizontal menu problem

Post by wientanz »

Some time ago I switched my layout to the theme andreas01 from themes.cmsmadesimple.org and adapted it to my needs. Some of the content didn't fit into the layout, so I copied the template and stylesheets and replaced it with the CSS Menu Horizontal. This whole thing I used on the specific content that didn't fit. It does now, but the menu doesn't. It misbehaves in IE and Firefox in two completely different ways! And although the dropdown menu is horizontal style, the menu itself isn't. I must confess that I'm not the CSS crack, so I'm really happy for any help.

Please have a look!  :o

http://www.bugovsky.com/index.php?page=Ballkalender
Last edited by wientanz on Thu May 25, 2006 1:46 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Horizontal menu problem

Post by Dr.CSS »

it looks like you are still using the Verticle menu...

for horizontil use this.....

/* The wrapper clears the floating elements of the menu */
#menuwrapper{width:100%}

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

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


/* Unless you know what you do, do not touch this */
#primary-nav{
list-style: none;
margin: 0px 15px;
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;
}

and set the avmenu....


#avmenu {
/*clear: left;
float: left;*/
width: 100%;
margin: 0 4px 4px 0;
padding: 0;
font-size: 0.9em;
}

and you get the look in the img. below.....

    mark

[attachment deleted by admin]
wientanz

Re: Horizontal menu problem

Post by wientanz »

Hi, thanks for the moment. I'll try that when I come back from the weekend. I'm having a fencing tournament this saturday and sunday, so will check it out sunday. Looks promising, though.

I played around with it but couldn't make it to work.

THANKS from my end of the modem line :-)
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Horizontal menu problem

Post by Dr.CSS »

did you use it all and not any of yours?...
that screenshot is what i ended up with by replacing all your stuff except the actual styling as in colors and padding, margins,...
if you make the page wider the menu will not be so cramped on top of itself...

  mark
unless of course your looking for something else...
wientanz

Re: Horizontal menu problem

Post by wientanz »

Hi,
now I finally had a chance to look into it. I tried and it resulted in exactly the same layout as in your picture. Well, it looks different in IE. Still vertical there. And in Firefox, the first picture sticks to the menu, which shouldn't be.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Horizontal menu problem

Post by Dr.CSS »

you need to change...





delete everything in red, IE can't get there that way, it's a protected directory, one way to test it is to put that line in IE add. bar and see if you can get there,... hence the JS not working in IE...

this needs another ....

     
     
 
 

because of this... 2 starting ... it make the browsers think this div stops way down(actually it never closes, there aren't enuf closing divs for starting divs) your page putting every thing in one 'box'


     
        Menu:
       


 
      mark
wientanz

Re: Horizontal menu problem

Post by wientanz »

Hmmm... IE can access the htp://www.bugovsky.com/modules/CSSMenu/CSSMenu.js. I tried it and I could download the file. And I can't delete the http://www.bugovsky.com in the address as that's part of CMSMS's doing.

I added the second , but it still looks the same...
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Horizontal menu problem

Post by Dr.CSS »

you have one of your style sheet marked as media screen and one as print which ones are marked this way...
print is for when someone wants to print the info on the page like your schedule... print usually has the styles stript out so you get plain text...
try taking out the screen setting at the bottom of the template it's on the one with...
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* clearing */
.stretch,
.clear {
clear:both;
height:1px;
margin:0;
padding:0;
font-size: 15px;
line-height: 1px;
}
wientanz

Re: Horizontal menu problem

Post by wientanz »

trying that it got even worse. the content is "out of bounds", to use a golf-term.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Horizontal menu problem

Post by Dr.CSS »

take one of those out it looks like another one got thrown in from the menu template some how...

Links

Administration
 

      <<< delete one
     
wientanz

Re: Horizontal menu problem

Post by wientanz »

ok, we're back to square one. I deleted the div tag you told me to insert and reinserted the screen res info you told me to delete. Still not getting better.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Horizontal menu problem

Post by Dr.CSS »

ok try this, notice it's below the other h2 a must to work....

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#main h2{margin-top:120px}

this centers the img. and title....
wientanz

Re: Horizontal menu problem

Post by wientanz »

ok, image and title is centered now, but the menu still won't work in IE.
Look:
Image
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Horizontal menu problem

Post by Dr.CSS »

you might want to just make a new copy of the template for that page and make it wider to make room for the menu on the left...
if the menu works in IE...

still think you might want to try this in the ...



wientanz

Re: Horizontal menu problem

Post by wientanz »

well, actually, I can access the CSS file with the IE. And secondly, I can not change the path. Because it's something that CMSMS embeds itself. It's not in the template, but hardcoded.

The real problem is that I had a template and associated css files for vertical. When I made it to horizontal, the CSS Menu Horizontal Template collides with the CSS from the template. I know it does. But I can't seperate these two. That's essentialy my problem. And as I did'nt do the template, but got it from the theme repository, I don't know enough to change it.

Making the template wider isn't an option, because there are a few contents that are "x-large" like this. And I would have to tailor one espescially for each content. So, no. I need it to work that way. But of course thanks for any help so far. It gets better every time.
Locked

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