help with z-index

Quote

Post by Uffee » Mon Apr 30, 2012 7:49 am

I've integrated my website menu in my shop.

Code to the menu:

Code: Select all

/* Top level */
nav.dark li {list-style: none; float: left; border-right: 1px solid #2e3235; position: relative;}
nav.dark li.first, nav li.first a {border-top-left-radius: 8px; border-bottom-left-radius: 8px; -moz-border-top-left-radius: 8px; -moz-border-bottom-left-radius: 8px;}
nav.dark li.last, nav li.last a {border-top-right-radius: 8px; border-bottom-right-radius: 8px; -moz-border-top-right-radius: 8px; -moz-border-bottom-right-radius: 8px;}
nav.dark li.drop a {padding-right: 30px;}
nav.dark li a {display: block; padding: 6px 10px 10px; text-decoration: none; background-image: url(../image/navigation-sprite.png); background-repeat: repeat-x; font-size: 12px; color: #fff; border-top: 1px solid #5a5d60; border-left: 1px solid #525659; text-shadow: 0px -1px 0px #000;}
nav.dark li a {background-position: 0px 0px;}
nav.dark li a:hover, nav li.active a {background-position: 0px -36px;}
nav.dark li a:active {background-position: 0px -72px;}
nav.dark .dropdown {display: block; float: right; width: 7px; height: 5px; background: url(../image/drop-down.png) no-repeat; margin: -20px 15px 0px 12px;}

/* Drop down */
nav.dark li ul {opacity: 0; position: absolute; top: 41px; left: -26px; padding: 12px 15px; border-radius: 0px; -moz-border-radius: 0px; background: #222; display: none; z-index: 100;}
nav.dark li ul li {border-right: 0px; float: none!important; border-bottom: 1px solid #444; width: 190px;}
nav.dark li ul li:last-child { border-bottom: 0px;}
nav.dark li ul li a {background: none!important; border-left: 0px; border-top: 0px; padding: 10px 0px; font-size: 11px}
nav.dark li ul li a:hover {opacity: 0.5;}

nav.dark li ul li.arrow {background: url(../image/arrowtop.png) top left no-repeat; border-bottom: 0px; height: 10px; margin-top: -22px; margin-bottom: 10px;}
the problem encounter where it says:

/* Drop down */
nav.dark li ul {opacity: 0; position: absolute; top: 41px; left: -26px; padding: 12px 15px; border-radius: 0px; -moz-border-radius: 0px; background: #222; display: none; z-index: 100;}

and with the stylesheet.css code provided by OC

Code: Select all

	#header-top{
		border:1px solid #d6d6d6;
		border-width:0 1px 1px 1px;
		-webkit-border-radius:0 0 10px 10px;
		-moz-border-radius:0 0 10px 10px;
		-khtml-border-radius:0 0 10px 10px;
		border-radius:0 0 10px 10px;
		padding:5px 0 5px 10px;
		position: relative;
		z-index: 999;
		background:#fff url(../image/footer-top-bg.png) repeat-x bottom;
First thing: If z-index is 999 then my menu will appear BEHIND the menu of "Home, Wishlist, My Account, Cart.."
Second thing: If z-index change from 999 to 80 then my menu will appear in the front of "Home, Wishlist, My Account, Cart.." (which is good) BUT if I press the triangel, (pointing down) in the menu then I will see what I have in my shopping cart. if I move down the mouse further then the box will disappear???.

How can I fix this?

Please go to http://www.ski-sweden.se/shop/
"Lägg i kundkorgen" = add to cart


Thanks
Uffee
Newbie
Posts
19
Joined
Tue Apr 17, 2012 4:53 pm
Top

Re: help with z-index

Quote

Post by Etcher » Mon Apr 30, 2012 8:30 pm

You have a few issues with css like all of the <br /> to move down the container div. Just use the margin instead of the breaks. Also try to have the code in the order the page elements are on the page from top to bottom to save yourself some trouble with drop downs and z-index.

The problem is your header div has a higher z-index than your mini cart drop down and #wrap div is layered within the header div. To fix it, change the z-index from 99 to 8 on the #header and move the whole #wrap div out of the header and place it right above it.
Etcher
Newbie
Posts
11
Joined
Fri Mar 30, 2012 10:25 pm
Top

Re: help with z-index

Quote

Post by Uffee » Mon Apr 30, 2012 10:14 pm

Etcher wrote:You have a few issues with css like all of the <br /> to move down the container div. Just use the margin instead of the breaks. Also try to have the code in the order the page elements are on the page from top to bottom to save yourself some trouble with drop downs and z-index.

The problem is your header div has a higher z-index than your mini cart drop down and #wrap div is layered within the header div. To fix it, change the z-index from 99 to 8 on the #header and move the whole #wrap div out of the header and place it right above it.
Okey I've removed the all the br and used margins instead. I just want to confirm that the header.tbl is correct as you describe it for me

header.tbl:

Code: Select all

<head>
</head>
<body>

<div id="container">

<div id="wrap">
<br />

	<div class="navigation-sajtwide">

		<ul id="nav">
			<div class="wrapper">
				<nav class="dark">
					<ul class="clear">

						<li><a href="http://www.ski-sweden.se">Startsida / Hem</a></li>
						<li><a href="om-klubben">Om klubben</a>   
						<ul> 
						
						<!--<li><a href="traningstider">Träningstider</a></li>-->
						<li><a href="instruktorer">Instruktörer</a></li>
						<!--<li><a href="http://www.ski-sweden.se/karate-barngruppen">Barngruppen</a></li>-->
						<li><a href="http://www.ski-sweden.se/karate-juniorgruppen">Juniorgruppen</a></li>
						<li><a href="http://www.ski-sweden.se/karate-seniorgruppen">Seniorgruppen</a></li>
						<li><a href="http://www.ski-sweden.se/karate-seniorgruppen-tavlingsgruppen">Tävlingsgruppen - Vuxna</a></li>
						<li><a href="http://www.ski-sweden.se/karate-juniorgruppen-tavlingsgruppen">Tävlingsgruppen - Barn</a></li>
						<li><a href="National-Team-SKIF-Sweden">National Team SKIF-Sweden</a></li> 						
						
						</ul>
						</li>
						<li><a href="http://www.ski-sweden.se/om-karate">Vad är karate</a></li>
						<li><a href="#">Events</a>
						<ul>						
						<li><a href="http://skief-12ec.hu/">European Championships</a></li>
						<li><a href="http://www.skifworld.com/">World Championships</a></li>
						<li><a href="http://www.ski-sweden.se/kalender">Kalender</a></li>
						</ul>
						</li>
						<li><a href="http://www.ski-sweden.se/shop/">Shop</a></li>
						<li><a href="http://www.ski-sweden.se/Forum/viewforum.php?f=76&sid=3668f21fd24337086551d81dc9b7efa7">Nyheter</a></li>
						<li><a href="http://www.ski-sweden.se/Forum/">Forum</a></li>
						<li><a href="Gastbok">Gästbok</a></li>
						<li><a href="#">Videogalleri</a>
						<ul>
						<li><a href="http://www.ski-sweden.se/VideoGalleri-EM-Budapest-2011">Em Budapest 2011</a></li>
						</ul>
						</li>
						<li><a href="#">Bildgalleri</a>	
						<ul>
						<li><a href="http://www.ski-sweden.se/Galleri-Japan-2008">Japan 2008</a></li>  
						<li><a href="http://www.ski-sweden.se/Galleri-Grekland-2009">Grekland 2009</a></li>
						<li><a href="http://www.ski-sweden.se/Galleri-Bushido-Open-2010">Bushido Open 2010</a></li>
						<li><a href="http://www.ski-sweden.se/Galleri-Kanazawa-Farewell-Camp-2010">Kanazawa Farewell Camp 2010</a></li> 
						<li><a href="http://www.ski-sweden.se/Galleri-Julgraderingen-2010">Julgraderingen 2010</a></li> 
						<li><a href="http://www.ski-sweden.se/Galleri-Ulfs-Shodan-Gradering-2010">Ulfs Shodan Gradering 2010</a></li>
						<li><a href="http://www.ski-sweden.se/Galleri-Niklas-Och-Fredriks-Shodan-2011">Niklas och Fredriks Shodan Gradering 2011</a></li>
						<li><a href="http://www.ski-sweden.se/Galleri-Budapest-EM-2011">Budapest EM 2011</a></li>
						<li><a href="http://www.ski-sweden.se/Galleri-Julgraderingen-Vuxna-2011">Julgraderingen 2011</a></li>
						</ul>
						</li>
						<li><a href="#">Mästare</a>
						<ul>     		
						<li><a href="http://www.ski-sweden.se/om-kyoushi-refik-bebinno">Kyoushi Refik Bebinno</a></li>  
						<li><a href="http://www.ski-sweden.se/Funakoshi">Gichin Funakoshi</a></li>
						<li><a href="http://www.ski-sweden.se/Kanazawa">Hirokazu Kanazawa Kancho</a></li>	
						</ul>
						</li>
						<li><a href="http://www.ski-sweden.se/Bli-Medlem">Bli medlem?</a></li>
						
					</ul>
				</nav>
			</div>
		</ul>	
   </div>

   <!-- END Dark navigation bar -->  

</div>


<!-- Header Top Starts -->

	<div id="header-top" class="clearfix">
	<!-- Header Links Starts -->
		<div class="links">
		
			<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>
			<a href="<?php echo $wishlist; ?>" id="wishlist_total"><?php echo $text_wishlist; ?></a>
			<a href="<?php echo $account; ?>"><?php echo $text_account; ?></a>
			<!-- <a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a> -->
			<a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a>
		</div>
				
	<!-- Header Links Ends -->
	<!-- Cart Starts -->
		<?php echo $cart; ?>
	<!-- Cart Ends -->	
	<!-- Welcome Message Starts -->  
		<div id="welcome">
			<?php if (!$logged) { ?>
				<?php echo $text_welcome; ?>
			<?php } else { ?>
				<?php echo $text_logged; ?>
			<?php } ?>
		</div>  
	<!-- Welcome Message Ends -->
	</div>
<!-- Header Top Ends -->
<!-- Header Starts -->
	<div id="header">
	<!-- Logo Starts -->
	  <?php if ($logo) { ?>
		<div id="logo">
			<a href="<?php echo $home; ?>">
				<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" />
			</a>
		</div>
	  <?php } ?>
	<!-- Logo Ends --> 
			
	
	<!-- Currency Starts -->
		<?php echo $currency; ?>
	<!-- Currency Ends -->
	<!-- Language Starts -->
		<?php echo $language; ?> 
	<!-- Language Ends -->	
	<!-- Search Starts -->  

		<div id="search">
			<div class="button-search"></div>
			<?php if ($filter_name) { ?>
				<input type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
			<?php } else { ?>
				<input type="text" name="filter_name" value="<?php echo $text_search; ?>" onclick="this.value = '';" onkeydown="this.style.color = '#000000';" />
			<?php } ?>
		</div>
	<!-- Search Ends -->	 
	</div>
	
<!-- Header Ends -->
<!-- Menu Starts -->
<?php if ($categories) { ?>
	<div id="menu">
	  <ul>
		<?php foreach ($categories as $category) { ?>
		<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
		  <?php if ($category['children']) { ?>
		  <div>
			<?php for ($i = 0; $i < count($category['children']);) { ?>
			<ul>
			  <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
			  <?php for (; $i < $j; $i++) { ?>
			  <?php if (isset($category['children'][$i])) { ?>
			  <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
			  <?php } ?>
			  <?php } ?>
			</ul>
			<?php } ?>
		  </div>
		  <?php } ?>
		</li>
		<?php } ?>
	  </ul>
	</div>
<?php } ?>
<!-- Menu Ends -->
<div id="notification"></div>
and in my css my navigation z-index has 100
header-top #cart { has z-index 9
#header-top #cart .heading { has z-index 1

Still wont work, i probably do something stupid :(
Uffee
Newbie
Posts
19
Joined
Tue Apr 17, 2012 4:53 pm
Top

Re: help with z-index

Quote

Post by Avvici » Mon Apr 30, 2012 10:40 pm

Like he said, your CSS is jacked. You need to fix your CSS before you will conquer anything else.

This is your Ajax cart code which tells you that you need the entire Div Element of #cart available for the mouse. If not, then yes the cart will close early. You need to FREE UP <div id="cart">

Code: Select all

/* Ajax Cart */
	$('#cart > .heading a').live('click', function() {
		$('#cart').addClass('active');
		
		$('#cart').load('index.php?route=module/cart #cart > *');
		
		$('#cart').live('mouseleave', function() {
			$(this).removeClass('active');
		});
	});
User avatar
Avvici
Expert Member
Posts
4723
Joined
Tue Apr 05, 2011 12:09 pm
Location - Asheville, NC
Top

Re: help with z-index

Quote

Post by Etcher » Mon Apr 30, 2012 11:27 pm

You moved #wrap above everything.

Put the indexes back the way you had them. Move #wrap RIGHT above... one level... above #header and change the #header to the index level from 99 to 8. I tried it with the code you previously had and it worked.

Code: Select all

<div id="container">
    <div id="header-top" class="clearfix">...</div>
    <div id="wrap">...</div>
    <div id ="header">...</div>
...
...
</div>
This is just a quick fix. Like avvici said, you have a bunch of issues to work out or you may encounter more problems. You have menus nested in divs that don't even need to be there. Work on making your design something like this without as many wrappers.

Code: Select all

<div id="container">
      <div id="header">
            <ul id="menu1">...</ul>
            <ul id="menu2">...</ul>
            <ul id="menu3">...</ul>
      </div><!-- end header -->
      <div id="content">
            ...
            ...
            ...
      </div><!-- end content -->
</div><!-- end container -->
Also try not to use negative margins except in very specials situations expecially when you are messing with z-indexes. Hope that helps some.
Etcher
Newbie
Posts
11
Joined
Fri Mar 30, 2012 10:25 pm
Top

Re: help with z-index

Quote

Post by Uffee » Tue May 01, 2012 1:35 am

Hi guys

Thanks for you effort and time, its working like a charm for me now. But i don't know if i actuallt followed your steps.

A quick summerize what i've done now:

in header.tbl i put my navigation below the <body>

Code: Select all

<div class="navigation-sajtwide">

		<ul id="nav">
			<div class="wrapper">
				<nav class="dark">
					<ul class="clear">

						<li><a href="http://www.ski-sweden.se">Startsida / Hem</a></li>
						<li><a href="om-klubben">Om klubben</a>   
                                                  .....
                                                  .....
                                                  .....
						<ul> 
					</ul>
				</nav>
			</div>
		</ul>	
   </div>

   <!-- END Dark navigation bar -->  

</div>
in the css:
my navigation has the z-index value of 1000
No negative margins this time
#header-top #cart { has z-index 9

Maybe u can took a look and give me more feedback if i screw something else up ;D
Uffee
Newbie
Posts
19
Joined
Tue Apr 17, 2012 4:53 pm
Top

Re: help with z-index

Quote

Post by Etcher » Tue May 01, 2012 2:20 am

Glad you got it to work.

I glanced at the css and I do see a margin value on navigation-sajtwide of 143 without "px" on it. I actually don't know how that is working without the px. Weird. You have a very strange css setup there Uffee, but somehow you made it work.

In the future...work on using a design pattern like the one I posted before and removing some of those unnecessary wrappers. I can move the entire <nav class="dark"> out of the <div class="wrapper"> and it doesn't seem to make a bit of difference to your design.

Code: Select all

<div class="navigation-sajtwide">
      <ul id="nav">
           <nav class="dark">
               <ul class="clear">
                  <li><a href="http://www.ski-sweden.se">Startsida / Hem</a></li>
                  <li><a href="om-klubben">Om klubben</a>   
                                                  .....
                                                  .....
                                                  .....
                  <ul> 
               </ul>
           </nav>
      </ul>   
   </div>

   <!-- END Dark navigation bar -->  

</div>
Etcher
Newbie
Posts
11
Joined
Fri Mar 30, 2012 10:25 pm
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 17 guests