menu in new css template

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"
Post Reply
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

menu in new css template

Post by giapippo »

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
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: menu in new css template

Post by velden »

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

Further:

Code: Select all

<nav>
<ul class="sf-menu sf-js-enabled">
<ul>
<li>
(Double <ul> tag). Might be a starting point.
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: menu in new css template

Post by giapippo »

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
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: menu in new css template

Post by giapippo »

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>
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: menu in new css template

Post by giapippo »

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;}
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: menu in new css template

Post by frankmanl »

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
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: menu in new css template

Post by velden »

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.
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: menu in new css template

Post by giapippo »

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;}
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: menu in new css template

Post by Dr.CSS »

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;
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: menu in new css template

Post by giapippo »

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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: menu in new css template

Post by Dr.CSS »

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...
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: menu in new css template

Post by giapippo »

Dr.CSS you are great !!!

the menu work but without color and content

why ?

thanks for help and patience
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: menu in new css template

Post by Dr.CSS »

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

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