COMMUNITY FORUM

Keyword
  1. Forum
  3. Commercial Joomla Extensions & Templates
  5. Frontpage Slideshow
  7. z-index ordering problem
Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

z-index ordering problem

  • andrea marucci
  • andrea marucci's Avatar Topic Author
  • Offline
  • New Member
More
13 years 2 months ago #42532 by andrea marucci
z-index ordering problem was created by andrea marucci
Hello everybody. I know that this issue was mentioned in the documentation troubleshooting but unfortunately I was not able to permorm the required actions since my menu or css or template structure it way too complex for me.

The problem is that all my menu goes underneath the slideshow so my site is almost unusable. I've tried to follow your instructions with no luck since I really don't know what to modify.

I would need your help. I'm using Yootheme Noble and the address of my site is www.kog.it/2011

Can anyone look at it and tell me exactly what to modify and where? I've spotted a menu.css with this content but I don't know what to do.

Please help me because, as you can see, the site is unusable this way...  :'(
/* Copyright (C) 2007 - 2010 YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/*
 * top and footer menu
 */

#toolbar ul.menu,
#footer ul.menu {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#footer ul.menu {
	display: block;
	line-height: 14px;
}

#toolbar .menu li,
#footer .menu li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

#toolbar .menu li a,
#footer .menu li a {
	display: inline-block;
	padding: 0px 8px 0px 15px;
	background: url(../images/topmenu_item_bg.png) 0 50% no-repeat;
	overflow: hidden;  
	color: #818384;
	text-shadow: 0 1px 0 rgba(255,255,255,1);
}
#footer .menu li a {
	background-image: url(../images/footermenu_item_bg.png);
	color: #CA6746;
}

#toolbar .menu a:hover { color: #3C3D3E; }
#footer .menu a:hover { color: #646566; }

#toolbar .menu a.first,
#footer .menu a.first {
	padding-left: 0px;
	background: none;
}

#toolbar .menu a.last,
#footer .menu a.last { padding-right: 0px; }

/*
 * menu
 */

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

#menu li {
	position: relative;
	z-index: 5;  
	margin: 0px;
	padding: 0px;
}

#menu a,
#menu span { display: block; }
#menu a { text-decoration: none; }

#menu span.icon {
	background-repeat: no-repeat;
	background-position: 0 50%;
}

#menu ul.menu {	float: left; }

#menu li.level1 { 
	background: url(../images/menu_level1_item.png) 0 45% no-repeat;
	float: left;
}

#menu li.level1.first { background: none; }

#menu a.level1,
#menu span.level1 { 
	padding: 0px 20px 0px 20px;
	float: left;
}

#menu a.level1 span.bg,
#menu span.level1 span.bg {
	height: 45px;
	padding: 0px 0px 0px 0px;
	float: left;
	line-height: 40px;
	font-size: 16px;
	color: #818384;
	text-shadow: 0px 1px 0px rgba(255,255,255,1);
	text-transform: uppercase;
}

#menu li.active a.level1 span.bg,
#menu li.active span.level1 span.bg { color: #CA6646; }

#menu li.level1:hover,
#menu li.level1.remain {  }

#menu li:hover a.level1,
#menu li:hover span.level1 {  }

#menu li:hover a.level1 span.bg,
#menu li:hover span.level1 span.bg,
#menu li.remain .level1 span.bg { color: #CA6646; }

#menu li.level1.parent:hover,
#menu li.level1.parent.remain { }

#menu a.level1 span.title,
#menu span.level1 span.title {
	font-size: 15px;
	line-height: 30px;
}

#menu a.level1 span.subtitle,
#menu span.level1 span.subtitle {
	margin-top: -7px;
	font-size: 9px;
	font-weight: normal;
	line-height: 10px;
	text-transform: none;
}

#menu div.fancy {
	position: absolute;
	bottom: 0px;
	z-index: 4;
	overflow: hidden;
}

#menu div.fancy div.fancy-1 {}
#menu div.fancy div.fancy-2 {}

#menu div.fancy div.fancy-3 {
	height: 45px;
	background: url(../images/menu_fancy.png) 50% 100% no-repeat;
}

#menu .dropdown {
	position: absolute;
	top: 45px;
 	left: -999em;  
	z-index: 100;
	 
}

#menu li:hover .dropdown,
#menu li.remain .dropdown { left: -2px; }

#menu li.last:hover .dropdown,
#menu li.remain.last .dropdown,
#menu .mod-dropdown li:hover .dropdown,
#menu .mod-dropdown li.remain .dropdown { left: auto; right: -2px; }

#menu .dropdown-t1 {}
#menu .dropdown-t2 {}
#menu .dropdown-t3 {}

#menu .dropdown-1 { background: url(../images/menu_dropdown_edges.png) 0 0 repeat-y; }

#menu .dropdown-2 {
	padding: 0px 3px 0px 3px;
	background: url(../images/menu_dropdown_edges.png) 100% 0 repeat-y;
}

#menu .dropdown-3 {
	padding: 10px 0px 10px 0px;
	background: #F3F4F5;
	overflow: hidden;
}

#menu .dropdown-b1 { background: url(../images/menu_dropdown_corners.png) 0 0 no-repeat; }

#menu .dropdown-b2 {
	padding: 0px 3px 0px 3px;
	background: url(../images/menu_dropdown_corners.png) 100% -8px no-repeat;
}

#menu .dropdown-b3 {
	height: 3px;
	background: url(../images/menu_dropdown_corners.png) 0 -16px repeat-x;
}

#menu ul.level2 { background: url(../images/menu_level2_line_v.png) 100% 0 repeat-y; }
#menu ul.level2.last { background: none; }

#menu .group-box1 { padding: 0px 10px 0px 10px; }

#menu .group-box2 { background: url(../images/menu_level2_item.png) 0 100% repeat-x; }

#menu li.level2.last .group-box2 { background: none; }

#menu .hover-box1 { overflow: hidden; }

#menu a.level2,
#menu span.level2,
#menu a.level2.last.parent,
#menu span.level2.last.parent {	overflow: hidden; }

#menu a.level2 span.bg,
#menu span.level2 span.bg {
	padding-left: 10px;
	line-height: 30px;
	font-size: 14px;
	color: #8C8C8C;
}

#menu a.level2:hover span.bg { color:  #CA6746; }

#menu li.level2 a.current span.bg { 
	color:  #CA6746;
	font-weight: bold;
} 

#menu a.level2 span.subtitle,
#menu span.level2 span.subtitle {
	margin-top: -16px;
	font-size: 10px;
	font-weight: normal;
	text-transform: none;
}

#menu a.level2 span.icon,
#menu span.level2 span.icon {
	min-height: 45px;
	padding-left: 50px;
	line-height: 45px;
}
#menu a.level2 span.icon span.title,
#menu span.level2 span.icon span.title { line-height: 33px; }
#menu a.level2 span.icon span.subtitle,
#menu span.level2 span.icon span.subtitle { line-height: 26px; }

 
#menu .sub { padding: 0px 0px 10px 0px; }
#menu li.level2.last .sub { padding-bottom: 5px; }

#menu ul.level3 { padding: 0px 0px 0px 10px; }

#menu a.level3 span.bg,
#menu span.level3 span.bg {
	padding-left: 12px;
	background: url(../images/menu_level3_item.png) 0px 0px no-repeat;
	line-height: 17px;
	font-size: 11px;
	color: #8C8C8C;
}

#menu a.level3.current span.bg { background-position: 0px -24px; }

#menu a.level3:hover span.bg {
	color: #CA6746;
	background-position: 0px -24px;
}

#menu .columns2 ul.level2,
#menu .columns3 ul.level2,
#menu .columns4 ul.level2 { float: left; }

#menu .columns2 ul.level2 {	width: 50%; }

#menu .columns3 ul.level2 { width: 34%; }
#menu .columns3 ul.first,
#menu .columns3 ul.last { width: 33%; }

#menu .columns4 ul.level2 { width: 25%; }

/*
 * sub menus
 */
 
div.mod-menu ul {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	list-style: none;
}

div.mod-menu ul.menu li {
	margin: 0px;
	padding: 0px;
}

div.mod-menu ul.menu a,
div.mod-menu ul.menu span { display: block; }
div.mod-menu ul.menu a { text-decoration: none; }

div.mod-menu ul.menu span.icon {
	background-repeat: no-repeat;
	background-position: 5px 50%;
	text-indent: 35px;
}

div.mod-menu ul.menu li.parent span.separator { cursor: pointer; }

div.mod-menu ul.menu span.subtitle { display: none; }


/*
 * sub menu: mod-line
 */

div.mod-line ul.menu span.bg {
	height: 30px;
	line-height: 30px;
	text-indent: 5px;
	color: #858586;
	font-size: 14px;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.6);
}

 
div.mod-line ul.menu a.current span.bg { color: #CA6646; }

div.mod-line ul.menu a:hover span.bg,
div.mod-line ul.menu span:hover span.bg { color: #CA6646; }

div.mod-line ul.menu li.level1 { 
	padding-left: 20px; 
	z-index: 500;
}

#contentleft div.mod-line ul.menu li.level1 { 
	padding-right: 20px;
	padding-left: 0px;
}

div.mod-line ul.menu li.level1:hover,
div.mod-line ul.menu li.level1.current { }

div.mod-line ul.menu a.level1,
div.mod-line ul.menu span.level1 { overflow: hidden; }

div.mod-line ul.menu a.level1 span.bg,
div.mod-line ul.menu span.level1 span.bg { border-top: 1px solid #CCCDCE; text-transform: uppercase; }

div.mod-line ul.menu li.first a.level1 span.bg,
div.mod-line ul.menu li.first span.level1 span.bg { border-top: none; }

div.mod-line ul.menu li.parent a.level1 span.bg,
div.mod-line ul.menu li.parent span.level1 span.bg { background: url(../images/submenu_level1_parent.png) 100% 0 no-repeat; }

div.mod-line ul.menu li.parent a.level1:hover span.bg,
div.mod-line ul.menu li.parent span.level1:hover span.bg { background-position: 100% -30px; }

div.mod-line ul.menu li.parent.active a.level1 span.bg,
div.mod-line ul.menu li.parent.active span.level1 span.bg { background-position: 100% -60px; }

div.mod-line ul.menu li.parent.active a.level1:hover span.bg,
div.mod-line ul.menu li.parent.active span.level1:hover span.bg { background-position: 100% -90px; }

.fancyfollower {
	background: url(../images/submenu_level1_item_hover.png) 0 0 no-repeat;
	position: absolute;
	z-index: 1;
}

#contentleft .fancyfollower { background: url(../images/submenu_level1_item_hover_left.png) 100% 0 no-repeat; }
 
div.mod-line ul.menu ul.level2 { padding: 0px 10px 10px 10px; }

div.mod-line ul.menu li.level2 {}

div.mod-line ul.menu li.level2 a:hover {}

div.mod-line ul.menu li.level2 span.bg {
	height: 20px;
	line-height: 20px;
	text-indent: 15px;
	font-size: 12px;
	background: url(../images/submenu_level2_item.png) 0px 0px no-repeat;
}

div.mod-line ul.menu a.level2:hover span.bg { background-position: 0px -25px; }

div.mod-line ul.menu a.level3 span.bg { background-position: 10px 0px; text-indent: 25px; }
div.mod-line ul.menu a.level3:hover span.bg { background-position: 10px -25px; }

div.mod-line ul.menu a.level4 span.bg { background-position: 20px 0px; text-indent: 35px; }
div.mod-line ul.menu a.level4:hover span.bg { background-position: 20px -25px; }

Please Log in or Create an account to join the conversation.

  • andrea marucci
  • andrea marucci's Avatar Topic Author
  • Offline
  • New Member
More
13 years 2 months ago #42533 by andrea marucci
Replied by andrea marucci on topic Re: z-index ordering problem
I've applied this tips

forum.joomlaworks.net/frontpage-slideshow-(for-joomla!)/fpss-v3-0-0-z-index-problem-!/msg54250/#msg54250

and it seems to work. it's correct?

Please Log in or Create an account to join the conversation.

More
13 years 2 months ago #42534 by Lefteris
Replied by Lefteris on topic Re: z-index ordering problem
Hi. Since it solved your issue and didn't cause others, it's correct.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  1. Forum
  3. Commercial Joomla Extensions & Templates
  5. Frontpage Slideshow
  7. z-index ordering problem

Powered by Kunena Forum