Member Avatar for raheelmushtaq

Hi bro,
m new designer and new member @ this site, m in a problem, m tryng to bring the menu infront of the image i have on my web page, can u help me to solve the problem plz the code is
Here in this code i wd like to bring the menu infront of flashmovie and mobileprice

div
{

height:1024px;
background-color: #FFFFFF;
width:925px;
top:5px;
left:5px;
position:absolute;

}

#a
 {background-image:url(images/index_03.gif);
position:absolute;
top:25px;
left:10px;
height:82px;
width:472px}

#b
 {background-image:url(images/index_04.gif);
position:absolute;
top:25px;
left: 482px;
height:82px;
width:460px}
#login
{
top:3px;
left:425px;
position:absolute;
}
#password
{


top:3px;
left:595px;
position:absolute;
}
#submit{
top:3px;
left:782px;
position:absolute;

}

#register{
top:3px;
left:850px;
position:absolute;
font-size:16px;
}
#wrapper{
z-index:100;
}
#navmenu
{
margin:0;
padding:0;
top:107px;
left:20px;

}
#navmenu ul
{
margin:0;
padding:0;
line-height:30px;
}

#navmenu li
{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999999;
}
#navmenu ul li a
{

text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
height:30px;
width:128px;
display:block;
color:#FFFFFF;
border:1px solid #000000;
}
#navmenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navmenu ul li:hover ul{
visibility:visible;
}

/*********************************************************/
#navmenu li:hover{
background:#0099FF;
}
#navmenu ul li:hover ul li a:hover{
background:#CCCCCC;
color:#000000;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}

#flashmovie{
	width:600px;
	height:200px;
	left:20px;
	top:139px;
	position:absolute;
	border:2px;
	color:#0000CC;
	background:#0000FF;
	z-index:2;
	
}
#mobileprice{
	width:310px;
	height:200px;
	left:620px;
	top:139px;
	position:absolute;
	border:2px;
	color:#0000CC;
	background:#00CC00;
	z-index:3;
	
}

thanks wd best regards

Edited by Ezzaral because: Added code tags. Please use them to format all code that you post.
  • 4 Contributors
  • 3 Replies
  • 122 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

The menu not showing above your other elements is almost always a stacking-context or positioning issue rather than a mysterious number choice. As pointed out, larger z-index values do sit “in front,” but z-index only applies to elements that have a position other than static, and it only compares inside the same stacking context. Follow these steps.

Make the menu a positioned element and give it a higher z-index than the Flash/other containers. For example:

#navmenu {
  position: relative; /* or absolute if you need exact coordinates */
  z-index: 9999;
}

If that still doesn’t work, the Flash object can be the cause: plugin content normally paints above HTML unless the Flash player's window mode is set to allow HTML layers (this is what referred to). Set the Flash embed/object to use a wmode that allows overlays (usually "opaque" or "transparent") — many embedding helpers (SWFObject or server-side templates) can toggle this. Be aware that using wmode can change performance and event behavior.

Also watch for parent stacking contexts. If the menu is inside a parent with a lower z-index (or a parent that creates a stacking context via transforms, opacity < 1, or its own z-index), it cannot escape to sit above a sibling that’s in a higher stacking context. Solutions: move the menu outside that parent, raise the parent’s z-index, or remove the property creating the stacking context. Ignore the suggestion to use negative z-index to "push" things — negative will put the item behind page content and usually hide it.

Quick checklist: inspect computed position and z-index with dev tools, temporarily add a solid background to the menu to test layering, set Flash wmode if needed, and adjust parent stacking contexts. For details on how z-index and stacking contexts work, see MDN: z-index and MDN: Understanding z-index.

Recommended Answers

All 3 Replies

Member Avatar for Lusiphur

Well, I have to say I've never seen z-index:100 used before...

Really not sure what you're working at there but just remember the higher the z-index the further forward it is from the back of the stack... higher = 'on top of' lower... as long as whatever you want to appear behind has a lower z-index than whatever you want to appear in front you've got it half way there.

That being said, if you have the other positioning incorrect, it doesn't matter at all what z-index the item is at if they aren't told to sit on the same spot :twisted:

Best of luck sorting it :)

Member Avatar for JJenZz

If the issue is that you cannot bring something on top of a flash object, the solution is to add the following inside the flash <object>:

<param name="wmode" value="opaque"/>

This will allow elements to be positioned on top of the flash.

Member Avatar for Member #334542

Try using the zindex to -1, you can individually set it in the div statment.

Edited by Member #334542 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.