Joomla Templates Club 406,261 posts

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#162322

Dear Forum Members,

In the context of the 2nd menu (ja-cssmenu) a problem/question has arised:

When you look on our test-site at http://new.oeschger-brandschutz.ch , you see that the 2nd menu is set off vertically by a small gap from the horizontal main menu.

This is wanted.

The solution we have chosen is not quite the best. We have achieved this effect by adding a border with a white background onto the 2nd level ja-cssmenu li ul as you can see from the css code below:

#ja-cssmenu li a {
vertical-align: middle;
display: block;
text-decoration: none;
font-size: 100%;
color: #666666;
padding: 0px 25px 0px 25px; /* Rand gesamte Liste von Links und Rechts 25px und Schrift von oben 2px */
text-transform: regular;
line-height: 25px;
height: 25px;
background: ffffff;
border-bottom: 10px solid #ffffff !important; /* <– padding 2nd level menu from top */
}

This method is not really targeting for example if you look at specific browsers. They draw a thin blue line around the 10px gap below the active (highlighted) item on level 1.

Question here:

Can somebody provide us with a targeting (correct) solution on how to span the 2nd menu from top AND draw a border line (1px) around the 2nd menu pulldown element.

Our website address: http://new.oeschger-brandschutz.ch

As already mentioned, the actually used method is more a helpless ‘workaround’ than a solution but it shall illustrate the wanted optical end result.

Any targeting advice is very welcome.

Best regards,

Netshare

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#384668

<em>@mmservices 231989 wrote:</em><blockquote>Dear Forum Members,

In the context of the 2nd menu (ja-cssmenu) a problem/question has arised:

When you look on our test-site at http://new.oeschger-brandschutz.ch , you see that the 2nd menu is set off vertically by a small gap from the horizontal main menu.

This is wanted.

The solution we have chosen is not quite the best. We have achieved this effect by adding a border with a white background onto the 2nd level ja-cssmenu li ul as you can see from the css code below:

#ja-cssmenu li a {
vertical-align: middle;
display: block;
text-decoration: none;
font-size: 100%;
color: #666666;
padding: 0px 25px 0px 25px; /* Rand gesamte Liste von Links und Rechts 25px und Schrift von oben 2px */
text-transform: regular;
line-height: 25px;
height: 25px;
background: ffffff;
border-bottom: 10px solid #ffffff !important; /* <– padding 2nd level menu from top */
}

This method is not really targeting for example if you look at specific browsers. They draw a thin blue line around the 10px gap below the active (highlighted) item on level 1.

Question here:

Can somebody provide us with a targeting (correct) solution on how to span the 2nd menu from top AND draw a border line (1px) around the 2nd menu pulldown element.

Our website address: http://new.oeschger-brandschutz.ch

As already mentioned, the actually used method is more a helpless ‘workaround’ than a solution but it shall illustrate the wanted optical end result.

Any targeting advice is very welcome.

Best regards,

Netshare</blockquote>

Open this File: http://new.oeschger-brandschutz.ch/templates/ja_nickel/ja_menus/ja_cssmenu/ja.cssmenu.css

Replace the Css code


#ja-cssmenu li a {
border-bottom: 10px solid #FFFFFF !important;
color: #666666;
display: block;
font-size: 100%;
height: 25px;
line-height: 25px;
padding: 0 25px;
text-decoration: none;
vertical-align: middle;
}

With


#ja-cssmenu li a {
color: #666666;
display: block;
font-size: 100%;
height: 25px;
line-height: 25px;
padding: 0 25px;
text-decoration: none;
vertical-align: middle;
}


Hope this would be helpful

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#384678

Dear Chavan,

thank you for your message.

But i guess that you misunderstood us.

It is WANTED that there is a gap.

The construction with the help of

border-bottom: 10px solid #FFFFFF !important;

shall just be a temporary construction as it is not really optimal.

We ask for a BETTER solution on how to build this gap.

Any targeting advice would be helpful.

Best regards,

Netshare

<em>@Chavan 232003 wrote:</em><blockquote>Open this File: http://new.oeschger-brandschutz.ch/templates/ja_nickel/ja_menus/ja_cssmenu/ja.cssmenu.css

Replace the Css code


#ja-cssmenu li a {
border-bottom: 10px solid #FFFFFF !important;
color: #666666;
display: block;
font-size: 100%;
height: 25px;
line-height: 25px;
padding: 0 25px;
text-decoration: none;
vertical-align: middle;
}


With


#ja-cssmenu li a {
color: #666666;
display: block;
font-size: 100%;
height: 25px;
line-height: 25px;
padding: 0 25px;
text-decoration: none;
vertical-align: middle;
}


Hope this would be helpful</blockquote>

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#384719

<em>@mmservices 232017 wrote:</em><blockquote>Dear Chavan,

thank you for your message.

But i guess that you misunderstood us.

It is WANTED that there is a gap.

The construction with the help of

border-bottom: 10px solid #FFFFFF !important;

shall just be a temporary construction as it is not really optimal.

We ask for a BETTER solution on how to build this gap.

Any targeting advice would be helpful.

Best regards,

Netshare</blockquote>

Please provide us a screenshot of how it should look like.

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#384824

Dear Chavan,

it shall like as you can see on our website: http:/new.oeschger-brandschutz.ch but not with this clumsy border-command.

This is not professional made and is just a workaround for the moment.

any targeting input is appreciated.

Best,

Netshare

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#384831

<em>@mmservices 232218 wrote:</em><blockquote>Dear Chavan,

it shall like as you can see on our website: http:/new.oeschger-brandschutz.ch but not with this clumsy border-command.

This is not professional made and is just a workaround for the moment.

any targeting input is appreciated.

Best,

Netshare</blockquote>

No this is the right way. Since the possibilty of removing the border-command is either padding or margin or even the height. If you set this either you can’t navigate to the sub menus nor the text of the Menu will overflow for the grey background.

1 user says Thank You to chavan for this useful post

1. mmservices

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#384842

Dear Chavan,

thank you for this explanation. We will reflect on this and eventually change back the gap.

Another important question regarding the menu structure, if you allow:

we have a weird problem which cannot be answered by the forum public so far.

Eventually you can help us out of trouble?

If yes, we would thank you a lot in advance.

Below you will find a short problem description:

As you already know we are building up a JA Nickel website.

in our main menu (left side) we have 3 menu levels.

functionality is ok, menues are working technically well.

regarding the css design we notice a problem with the active/hover/passive state of the level 3 menu.

when the level 2 element (Sprinkler-Löschsysteme) gets an active state, all elements of level 3 (childs of ‘Sprinkler-Löschsysteme’ got an active state (underline) as you can see on the attached image.

this is wrong and unwanted.

our website: http://new.oeschger-brandschutz.ch

any targeting help is appreciated much.

with our best regards,

netshare

———————————————————————————————–

here are the code fragments of the left side ul.menu structure:

/* Default Joomla! Menu */
ul.menu {
font-size: 90%;
vertical-align: top;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

ul.menu li {
margin: 0px 0px 20px 0px; /* Abstaende der Level-0 Bloecke im Splitmenu */

}

ul.menu li a {
display: block;
outline: none;
margin: 0px 0px 0px 0px;

padding: 0px 5px 0px 25px; /* Abstand Pfeile und Block im Splitmenu */
color: #666666;
border-top: 0px solid #E5E5E5;
background: #ffffff url(../images/strich_passiv.png) no-repeat 0px center;
text-decoration: none;
}

ul.menu li a:hover,
ul.menu li.active a,
ul.menu li a:focus {

color: #666666;
margin: 0px;
background: #ffffff url(../images/strich_aktiv.png) no-repeat 0px center;
text-decoration: underline;
}

ul.menu li ul {
list-style: none;
margin: 0px;
padding: 0px;
}

ul.menu li li {
border: none;
margin: 0px 0px 0px 0px;

}

ul.menu li li a {
background: #FFFFFF no-repeat 0px center !important;
border: none;
font-weight: normal !important;
text-decoration: none !important;
padding: 2px 0px 0px 30px!important;
width: 75%; /*need for ie6*/

}

ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
text-decoration: underline !important;
background: #FFFFFFF no-repeat 0px center !important;
color: #666666;
}

ul.menu li li.active a {
text-decoration: underline !important;
background: #FFFFFFF no-repeat 0px center !important;
color: #666666;
}

ul.menu li li ul {
list-style: none;
margin: 0px;
padding: 0px;
font-weight: normal !important;
text-decoration: none !important;

}

ul.menu li li li {
border: none;
margin: 0px 0px 0px 0px;
background: #FFFFFF no-repeat 0px center !important;
border: none;
font-weight: normal !important;
text-decoration: none !important; /* <— this instruction has no effect, overridden by level 2, ul.menu li li.active a */

}

ul.menu li li li a {
background: #FFFFFF no-repeat 0px center !important;
border: none;
font-weight: normal !important;
text-decoration: none !important; /* <— this instruction has no effect, overridden by level 2, ul.menu li li.active a */
padding: 2px 0px 0px 45px!important;
width: 75%; /*need for ie6*/

}

ul.menu li li li a:hover,
ul.menu li li li a:active,
ul.menu li li li a:focus {
text-decoration: underline !important; /* <— this instruction has no effect, overridden by level 2, ul.menu li li.active a */
background: #FFFFFFF no-repeat 0px center !important;
color: #666666;
}

ul.menu li li li.active a {
text-decoration: underline !important; /* <— this instruction has no effect, overridden by level 2, ul.menu li li.active a */
background: #FFFFFFF no-repeat 0px center !important;
color: #11175E;
}

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#384934

Please provide your admin details in PM. Since there are every where ” !important” in your css and it is quite confusing.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#385005

Here is the CSS code to be replaced for the menu.

Delete the existing whole css for menu and replace this


ul.menu {
font-size: 90%;
vertical-align: top;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
ul.menu li {
margin: 0px 0px 20px 0px; /* Abstaende der Level-0 Bloecke im Splitmenu */
}
ul.menu li a {
display: block;
outline: none;
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 25px; /* Abstand Pfeile und Block im Splitmenu */
color: #666666;
border-top: 0px solid #E5E5E5;
background: #ffffff url(../images/strich_passiv.png) no-repeat 0px center;
}
ul.menu li a:hover,
ul.menu li.active a,
ul.menu li a:focus {
color: #666666;
margin: 0px;
background: #ffffff url(../images/strich_aktiv.png) no-repeat 0px center;
}
ul.menu li ul {
list-style: none;
margin: 0px;
padding: 0px;
}
ul.menu li li {
border: none;
margin: 0px 0px 0px 0px;
}
ul.menu li li a {
background: #FFFFFF no-repeat 0px center !important;
border: none;
font-weight: normal !important;
padding: 2px 0px 0px 30px!important;
# width: 75%; /*need for ie6*/
}
ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
background: #FFFFFFF no-repeat 0px center !important;
color: #666666;
}
ul.menu li li.active a {
background: #FFFFFFF no-repeat 0px center !important;
color: #666666;
}
ul.menu li li ul {
list-style: none;
margin: 0px;
padding: 0px;
font-weight: normal !important;
}
ul.menu li li li {
border: none;
margin: 0px 0px 0px 0px;
background: #FFFFFF no-repeat 0px center !important;
border: none;
font-weight: normal !important; /* <--- this instruction has no effect, overridden by level 2, ul.menu li li.active a */
}
ul.menu li li li a {
background: #FFFFFF no-repeat 0px center !important;
border: none;
font-weight: normal !important;
/* <--- this instruction has no effect, overridden by level 2, ul.menu li li.active a */
padding: 2px 0px 0px 45px!important;
width: 75%; /*need for ie6*/

}
ul.menu li li li a:hover,
ul.menu li li li a:active,
ul.menu li li li a:focus {
background: #FFFFFFF no-repeat 0px center !important;
color: #666666;
}
ul.menu li li li.active a {

background: #FFFFFFF no-repeat 0px center !important;
color: #666666;
}
ul.menu li.active a{
text-decoration:underline !important;
}
ul.menu li.active li.active a{
text-decoration:underline !important;
}
ul.menu li.active li.active li.active a{
text-decoration:underline !important;
}
ul.menu li.active li a{
text-decoration:none !important;
}
ul.menu li.active li.active li a{
text-decoration:none !important;
}
ul.menu li a{
text-decoration:none;
}


1 user says Thank You to chavan for this useful post

1. mmservices

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#385010

Dear Chavan,

yes, thanks!

This is exactly the correct solution, indeed.

Well done.

This is a 200% satisfaction guarantee.

With my best wishes from Switzerland,

Herbert

[Author]

Posts