[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 303
  • Last Modified:

CSS using z-index to put jQuery menu under header image

I am trying to put the jQuery menu here http://forms.techinc.org/float/index.html under the header with z-index in the CSS. I can get the menu to go under but the menu stops working completely or at least acts really screwy.

I can't figure out what I am doing wrong, please help.

/* slidy.css */

/*
 Author: Bob Stone
*/
 
body, p, td, th, ul, h1, h2, h3, disclaim, subhead
     {font-family: century gothic;}

body
     {color:#000; font-size:16px; margin-left:0px; margin-right:0px; 
     margin-top:0px; margin-bottom:0px; PADDING-BOTTOM: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
     PADDING-TOP: 0px;}

#header { 
	height:135px; 	
	margin: 0 auto;
	width: 1025px;
	z-index: 52; 
}
#moo { 
/* 	z-index: -1;
  	position: absolute;     - works but screws up menu */
}
#main { 
	width: 1025px;
	margin: 0 auto;
	padding: 150px 50px 0 50px;
}
/* Menu */
	#menu {

		list-style:none;	
		padding:0 0 0 200px;
		height:180px;
		width:700px;
		display: block ;
		position:absolute;
	}
	
		#menu li {
			float:left;
			width:109px;
			height:inherit;
			position:relative;
			overflow:hidden;
		}

		#menu li a  { 
			color: #fff;
			font-family: Arial;
			position:absolute;
			top:0px;
			padding: 38px 0 0 15px;
			background:url(menu.png) no-repeat 0 0;
			display:block; 
			width:109px; 
			height:inherit;
			text-decoration: none;

	}
/* Menu end */

h2 { 
	font-size: 13pt; 
}

Open in new window

0
Bob Stone
Asked:
Bob Stone
  • 5
  • 3
1 Solution
 
LZ1Commented:
For z-indexes to work properly they have to have either an absolute position or a fixed position.  
Your header is positioned relatively, which will kill the z-index right away.
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery Floating Menu</title>
<style> 
/*
 Author: Bob Stone
*/
 
body, p, td, th, ul, h1, h2, h3, disclaim, subhead
     {font-family: century gothic;}

body
     {color:#000; font-size:16px; margin-left:0px; margin-right:0px; 
     margin-top:0px; margin-bottom:0px; PADDING-BOTTOM: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
     PADDING-TOP: 0px;}

#header {
	height:135px;
	margin: 0 auto;
	width: 1025px;
	z-index: 52;
	position: absolute;
	top: 0px;
}
#wrapper {
	margin: 0px auto;
	width: 1025px;
}
#moo { 
/* 	z-index: -1;
  	position: absolute;     - works but screws up menu */
}
#main {
	width: 1025px;
	margin: 0 auto;
	padding: 250px 50px 0;
}
/* Menu */
	#menu {
	list-style:none;
	padding:0 0 0 200px;
	height:180px;
	width:700px;
	display: block;
	position:absolute;
	top: 150px;
	}
	
		#menu li {
			float:left;
			width:109px;
			height:inherit;
			position:relative;
			overflow:hidden;
		}

		#menu li a  { 
			color: #fff;
			font-family: Arial;
			position:absolute;
			top:0px;
			padding: 38px 0 0 15px;
			background:url(http://forms.techinc.org/float/menu.png) no-repeat 0 0;
			display:block; 
			width:109px; 
			height:inherit;
			text-decoration: none;

	}
/* Menu end */

h2 { 
	font-size: 13pt; 
} 
</style>
<script type="text/javascript" src="http://forms.techinc.org/float/js/jquery-1.3.1.min.js"></script>
	<script type="text/javascript" src="http://forms.techinc.org/float/js/jquery.easing.1.3.js"></script>
	<script>
		$(document).ready(function () {

		//get the default top value
		var top_val = $('#menu li a').css('top');

		//animate the selected menu item
		$('#menu li.selected').children('a').stop().animate({top:30}, {easing: 'easeOutQuad', duration:500});		

		$('#menu li').hover(
			function () {
				
				//animate the menu item with 0 top value
				$(this).children('a').stop().animate({top:30}, {easing: 'easeOutQuad', duration:500});		
			},
			function () {

				//set the position to default
				$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});		

				//always keep the previously selected item in fixed position			
				$('#menu li.selected').children('a').stop().animate({top:30}, {easing: 'easeOutQuad', duration:500});		
			}		
		);
	
	});
	
	</script>

	
</head>
<body>
<div id="wrapper"> 
<div id="header">
<img src="http://forms.techinc.org/float/images/bg_top.png">
</div> 
<div id="moo">
<ul id="menu">
	<li class="selected" ><a href="#"><h2>Home</h2></a></li>
	<li><a href="#"><h2>Unlimited Plan</h2></a></li>
	<li><a href="#"><h2>Phones</h2></a></li>

	<li><a href="#"><h2>Coverage</h2></a></li>
	<li><a href="#"><h2>About Us</h2></a></li>
	<li><a href="#"><h2>Contact Us</h2></a></li>
</ul>
</div>
</div><!--end wrapper -->
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lacus id turpis pellentesque imperdiet sed at purus. Maecenas gravida, eros ut imperdiet rhoncus, elit leo pulvinar mauris, vel ullamcorper enim nunc eu est. Curabitur purus odio, eleifend in porttitor et, venenatis ut massa. Quisque condimentum, arcu non ultricies facilisis, ligula purus tincidunt dui, in scelerisque nibh sem vel mauris. Suspendisse iaculis aliquam metus eu auctor. Fusce nunc nisi, dignissim vitae dictum rutrum, venenatis sed sapien. Integer sit amet tincidunt justo. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin a fringilla risus. In iaculis euismod eleifend. 

Suspendisse hendrerit fringilla est, eget lacinia massa fermentum vitae. Praesent in turpis ligula. Vestibulum a neque magna. Suspendisse urna erat, vulputate id condimentum ut, ultrices quis libero. Cras a nisl magna, sit amet elementum risus. Suspendisse lobortis velit ac purus luctus venenatis. Nullam dictum ullamcorper lacus, ut condimentum augue aliquet in. Donec nec orci ligula. Aliquam sit amet velit dolor, in ultricies tellus. Mauris lacinia, ante sit amet porttitor adipiscing, justo justo laoreet erat, nec pulvinar mauris massa quis massa. In in elit ac justo pellentesque iaculis sed nec lorem. Phasellus tincidunt eleifend bibendum. In ut erat quis nibh gravida aliquam at non turpis. Mauris scelerisque consectetur arcu eu ultricies. 
</div>

<br><br><br>

</body>
</html>

Open in new window

0
 
remorinaCommented:
Try adding a position:relative to the #header css class

As LZ1 mentioned, a z-index is pretty useless without a position:relative or absolute
#header {
height:135px;
margin:0 auto;
position:relative;
width:1025px;
z-index:52;
}

Open in new window

0
 
Bob StoneIT GuruAuthor Commented:
Like I said, I can get the menu to go under the background image, but the menu stops working completely in FF or acts really screwy in IE.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Bob StoneIT GuruAuthor Commented:
I have it set that way now, take a look.
0
 
LZ1Commented:
Kill the z-index for #moo and make the #header z-index 1.
Then set the z-index for #menu to 100
0
 
Bob StoneIT GuruAuthor Commented:
That did it! Thanks. =o)

Apparently I don't understand z-index numbers though, I thought the higher number meant it was on top.
0
 
Bob StoneIT GuruAuthor Commented:
Thanks =o)
0
 
LZ1Commented:
The higher number does mean it's on top.  However, remember the absolute positioning and also that everything your layering should have a z-index assigned.
0
 
Bob StoneIT GuruAuthor Commented:
Thanks, I will keep that in mind.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now