menu in new css template
menu in new css template
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
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
Re: menu in new css template
To start with: I would do an W3C validation on this code.
Further:
(Double <ul> tag). Might be a starting point.
Further:
Code: Select all
<nav>
<ul class="sf-menu sf-js-enabled">
<ul>
<li>
Re: menu in new css template
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
i have deleted one <ul> and the menu to down but without the correct template
bye
Re: menu in new css template
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>
<!-- 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>
Re: menu in new css template
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;}
.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;}
Re: menu in new css template
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
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
Re: menu in new css template
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.
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.
Re: menu in new css 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;}
"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;}
Re: menu in new css template
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;
<ul class="sf-menu">
<ul class="clearfix">
This is removing the second UL from the page...
.sf-menu ul {position:absolute;top:-999em;
Re: menu in new css template
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
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
Re: menu in new css template
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...
Re: menu in new css template
Dr.CSS you are great !!!
the menu work but without color and content
why ?
thanks for help and patience
the menu work but without color and content
why ?
thanks for help and patience
Re: menu in new css template
Look at the page source then look at the menu CSS to see if something could be hiding part of it...