Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV overlapping DIV, a simple menu problem.

    I'm making a very simple menu for at chat, where you are supposed to click on a nickname, and a popup should hoover over it. The problem is however how the nicknames below are covering the popup box, even with z-index set.

    I've figured that it is the NESTED div (menu) tag inside the NameTag div, that is causing this. If i move the menu div out one level so it is in line with all NameTag divs, it show up.

    This causes a problem, beside the point that it seems much more troublesome to handle, which is mouseover gets activated immidiately and the menu starts to flicker in and out.

    I hope someone have a sollution for this problem, have been bugging me all weekend

    Here is the simple html code:

    Code:
    <div class="NameTag" onMouseOver="showmenu(this)" onMouseOut="hidemenu(this)" >Breeze
    	<div class="menu" onMouseOut="hidemenu(this)">
    		<a href="#">Profil</a><br/>
    		<a href="#">Site</a>			
    	</div>
    </div>
    <div class="NameTag" onMouseOver="showmenu(this)" onMouseOut="hidemenu(this)" >Test
    	<div class="menu" id="1" onMouseOut="hidemenu(this)">
    		<a href="#">Profil</a><br/>
    		<a href="#">Site</a>			
    	</div>
    </div>
    CSS:

    Code:
    div.NameTag
    {
    	width:99%;
    	height:20px;
    	background-color:Silver;
    	border: 1px solid black;
    	text-indent: 5px;
    	position: relative;
    	z-index: 1;
    }
    
    div.menu
    {
    	left: 10px;
    	top: 5px;
    	width:150px;
    	height:100px;
    	border: 1px solid black;
    	display: none;
    	background-color: gray;
    	padding: 1px;
    	position: absolute;
    	z-index: 100;
    }

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Info Popup</title>
    		<style type="text/css">
    			#css dd	{
    				display:none;
    			}
    			#css:hover dd	{
    				display:block;
    			}
    		</style>
    	</head>
    	<body>
    		<dl id="js">
    			<dt>Javascript popup</dt>
    			<dd><a href="">Profile</a></dd>
    			<dd><a href="">Site</a></dd>
    		</dl>
    		<dl id="css">
    			<dt>CSS popup</dt>
    			<dd><a href="">Profile</a></dd>
    			<dd><a href="">Site</a></dd>
    		</dl>
    	</body>
    	<script type="text/javascript">
    		function toggle_dd(e)
    		{
    			var dd = e.currentTarget.getElementsByTagName("dd");
    			for(var i = 0; i < dd.length; i++)
    			{
    				if(dd[i].style.display != "block")
    				{
    					dd[i].style.display = "block";
    				}
    				else
    				{
    					dd[i].style.display = "none";
    				}
    			}
    		}
    
    		var dd = document.getElementById("js").getElementsByTagName("dd");
    		for(var i = 0; i < dd.length; i++)
    		{
    			dd[i].style.display = "none";
    		}
    
    		document.getElementById("js").addEventListener("click",toggle_dd,true);
    	</script>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •