0

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: Added code tags. Please use them to format all code that you post.

4
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by rajarajan07
0

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 :)

0

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.

0

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

Edited by rajarajan07: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.