CMS Made Simple Forums

hallo
i'm converting a css template to cmsms
all work fine but the menu in invisible

this in my test page

http://www.gianlucacompagno.com/sviluppo/

and this is the original template

http://www.gianlucacompagno.com/svilupp ... index.html

where is the problem ??


thanks

giapippo

To start with: I would do an W3C validation on this code.

Further:
(Double <ul> tag). Might be a starting point.

sorry but i don' t understand what i have to do




i have deleted one <ul> and the menu to down but without the correct template

bye

my template


<!-- header -->
<header>
<div class="main">
<nav>

<class="sf-menu">
{menu}
</nav>
<div class="clear"></div>

<div class="shadow">
<div class="main-img"><img src="consulting/images/gianlucacompagno.jpg" alt=""></div>
<ul class="links">
<li><a href="more.html"><img src="consulting/images/Android_Robot.png" alt=""><span>Worldwide Business Experience You Can Trust</span></a></li>
<li><a href="more.html"><img src="consulting/images/www.png" alt=""><span>Personal Strategy for Your Business Growth</span></a></li>
<li><a href="more.html"><img src="consulting/images/linkedin.png" alt=""><span>We'll Help Your Time Work for Your Money</span></a></li>
</ul>
</div>
</div>
</header>

css



.sf-menu{text-transform:capitalize;font-size:0;line-height:0;}
.sf-menu ul{position:absolute;top:-999em;min-width:126px;background:#e1e1e1;padding:14px 0px 5px 42px;left:0;display:none;}
.sf-menu li{position:relative;}
.sf-menu>li{float:left;background:url(../images/menu-border.png) 0 50% no-repeat}
.sf-menu>li:first-child{background:none;}
.sf-menu a{text-decoration:none;font-size:11px;line-height:14px;white-space:nowrap;position:relative;z-index:2;text-transform:uppercase;}
.sf-menu>li>a{color:#fff;padding:23px 0px 22px;width:112px;text-align:center;display:block;}
.sf-menu span{position:absolute;width:0;height:0;background:#fff;bottom:0;left:50%;overflow:hidden;opacity:.1;box-shadow:1px 1px 8px rgba(0,0,0,.95) inset}
.sf-menu li:hover ul,.sf-menu li.sfHover ul{top:59px;z-index:99;}
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
.sf-menu>li.current{background:#1a7bae !important;}
.sf-menu li li a{color:#000}
.sf-menu li li.current>a,.sf-menu li li>a:hover,.sf-menu li li.sfHover>a{color:#1a7bae;}
.sf-menu li li{margin:0 0 10px;}
.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:-100%;top:-14px;margin-left:-85px;}

You really have to do that W3C validation.
Go to http://validator.w3.org/ and choose More options > Document type > HTML5 (experimental).
It spits out 6 errors and 3 warnings. Solve those to start with.
Once you're clear on this go validate your css at http://jigsaw.w3.org/css-validator/. At this moment your css is OK.

Frank

You should review your menu template and make sure that it outputs exact the same html as your menu in the orginial template looks like.

Or alter all the menu-specific css to apply to the new situation (which I guess is a lot more work).

I'm not a html5 specialist but the <class="sf-menu"> does not do what you might expect. It's better to add that class to the starting ul-tag in the menu template.

i think the solution is this

"I'm not a html5 specialist but the <class="sf-menu"> does not do what you might expect. It's better to add that class to the starting ul-tag in the menu template. "

but i dont know what i have to do

the menu css template is:


.sf-menu{text-transform:capitalize;font-size:0;line-height:0;}
.sf-menu ul{position:absolute;top:-999em;min-width:126px;background:#e1e1e1;padding:14px 0px 5px 42px;left:0;display:none;}
.sf-menu li{position:relative;}
.sf-menu>li{float:left;background:url(../images/menu-border.png) 0 50% no-repeat}
.sf-menu>li:first-child{background:none;}
.sf-menu a{text-decoration:none;font-size:11px;line-height:14px;white-space:nowrap;position:relative;z-index:2;text-transform:uppercase;}
.sf-menu>li>a{color:#fff;padding:23px 0px 22px;width:112px;text-align:center;display:block;}
.sf-menu span{position:absolute;width:0;height:0;background:#fff;bottom:0;left:50%;overflow:hidden;opacity:.1;box-shadow:1px 1px 8px rgba(0,0,0,.95) inset}
.sf-menu li:hover ul,.sf-menu li.sfHover ul{top:59px;z-index:99;}
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
.sf-menu>li.current{background:#1a7bae !important;}
.sf-menu li li a{color:#000}
.sf-menu li li.current>a,.sf-menu li li>a:hover,.sf-menu li li.sfHover>a{color:#1a7bae;}
.sf-menu li li{margin:0 0 10px;}
.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:-100%;top:-14px;margin-left:-85px;}

It has nothing to do with the CSS as your menu now has 2 UL in the beginning you need to remove the second one, go to Menu manager click name of menu to edit...

<ul class="sf-menu">
<ul class="clearfix">

This is removing the second UL from the page...

.sf-menu ul {position:absolute;top:-999em;

thanks for help

but i have 2 problems:


1)
Menu manager click name of menu to edit...
but
simple_navigation.tpl (only read) {menu}

i can't modify


2)
i have deleted from template the ul in red
sf-menu ul{position:absolute;top:-999em;

but the menu dont view

sorry but i don't know cmsms very well
thanks

Put that back in your style sheet/CSS, go to menu manager and import the cssmenu.tpl, name it w/o the tpl, open it and change the <ul id="primary-nav"> to <ul class="sf-menu"> and remove the <ul class="sf-menu"> from the page template and it should work...

Dr.CSS you are great !!!

the menu work but without color and content

why ?

thanks for help and patience

Look at the page source then look at the menu CSS to see if something could be hiding part of it...