homepage Welcome to WebmasterWorld Guest from 54.211.50.5
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
css opacity on hover
z-index, position and margin
kingkol




msg:4342606
 7:38 am on Jul 22, 2011 (gmt 0)

Hi,

I am trying to build navigation menu.It consist 2 divs.one div for background(its opacity is .7) and another div for menu items.I stack these divs on top of each other by negative top-margin.but hover effect even "a" are not working when I set the opacity through css.How to fix that?any advice would be greatly appreciated.
code is like this
// this is background div
#nav_menu_bg
{
width:620px;
height:65px;
margin-top:55px;
background:#000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
opacity:.7;

}

//This is menu item divs,I even tried with z-index
#nav_menu
{
width:620px;
height:65px;
margin-top:-65px;
opacity:1;
z-index:1000;

}
#nav_menu ul
{
list-style:none;
padding-top:10px;
margin-left:25px;
}
#nav_menu ul li a
{
color:white;
font-size:18px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px 10px 14px 10px;
margin-right:40px;

}
#nav_menu ul li a:hover
{
background:#ffda0b;
color:#333;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}

Thanks in advance

 

Paul_o_b




msg:4342640
 9:37 am on Jul 22, 2011 (gmt 0)

Hi,

z-index only applies to positioned elements so add position:relative to the #nav_menu.

I assume you have a structure like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#nav_menu_bg {
width:620px;
height:65px;
margin-top:55px;
background:#000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
opacity:.7;
}
#nav_menu {
width:620px;
height:65px;
margin-top:-65px;
position:relative;
z-index:1000;
}
#nav_menu ul {
list-style:none;
padding-top:10px;
margin:0 0 0 25px;
}
#nav_menu ul li a {
color:white;
font-size:18px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px 10px 14px 10px;
margin-right:40px;
}
#nav_menu ul li a:hover {
background:#ffda0b;
color:#333;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
</style>
</head>
<body>
<div id="nav_menu_bg"></div>
<div id="nav_menu">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</body>
</html>


kingkol




msg:4342667
 11:34 am on Jul 22, 2011 (gmt 0)

Thank You so much.nav_menu required positioning. Its works.But to clarify could you please tell me why only negative margin didn't served the purpose?without giving z-index and position.

<style>
#nav_menu_bg
{
width:620px;
height:65px;
opacity:.7;
...
}
#nav_menu
{
width:620px;
height:65px;
margin-top:-65px;

}
</style>
<body>
<div id="nav_menu_bg"></div>
<div id="nav_menu">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</body>

Thanks once again.

Paul_o_b




msg:4342678
 12:35 pm on Jul 22, 2011 (gmt 0)

The overlapping of non positioned elements is not specifically defined in the specs (iirc) but usually the one that follows later in the html will go on top of one before if there are overlaps.

However, in your case this didn't happen because the #nav_menu_bg had opacity applied and I guess the browser treats this as more important because opacity applies to the parent and all its children as a whole. It's not inherited as such. The elements are all rendered and then opacity applied to them as a whole which is why you can't cut it off on inner elements - hence the need for your negative margin trick.

If you had added opacity:.99 to your #nav_menu then I believe it would have overlapped as you wished (opacity:1.0 means no opacity so does nothing really).

However, you are then leaving things to chance and expecting browsers all to behave the same. Therefore by adding position:relative and a higher z-index you avoid any mistakes a browser may make and control the situation yourself.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved