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
    Mar 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Hidden div displaying on rollover, but not with the right z-index

    I am a relative newbie tearing my hair out. I appreciate your effort in reading this post.

    Using javascript, I am trying to get a hidden div, consisting of a paragraph with a CSS background, to appear, on rollover, over the bottom part of an image for a portfolio site.

    My code works except for the following glitch: the text appears over the image, while the CSS background appears underneath it. I have tried as many z-index permutations as I could think of to fix this.

    Are there any common fixes when divs are just unresponsive to style changes? In case the problem lies with either my CSS or my JavaScript, I will post in both subsections.

    Code:
    <script type="text/javascript>
    window.onload=initAll;
    function initAll() {
    	document.getElementById("elemopic").onmouseover=unhide;
    	document.getElementById("elemopic").onmouseout=hide;
    }
    
     function unhide () {
    	document.getElementById("elemoblurb").style.display="block";
     }
     
     function hide(){
    	 document.getElementById("elemoblurb").style.display="none";
     }
     </script>
    
    <style type="text/CSS">
    #elemoblurb {
    	z-index:10;
    	background-image:url(images/elemoinfo.gif);
    	width:401px;
    	height:86px;
    	margin:-105px 0px 0px 386px;
    	padding:0px;
    }
    
    #elemoblurb p {
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    	color:#ccc5c5;
    	margin:15px 0px 0px 0px;
    	padding:15px 0px 0px 15px;
    }
    
    #mainbloc {
    	z-index:1;
    	margin:29px 0px 0px 340px;
    	padding:0px;
    }
    </style>
    
    <body>
    <div id="mainbloc">
    <img id="Lswirl" src="images/Lswirl.gif" />
    <img id="elemopic" src="images/elemo.gif" alt="Electric Lemonade logo re-design" />
    <img id="Rswirl" src="images/Rswirl.gif" />
    </div>
    
    </div>
    
    <div id="elemoblurb" class="hidden">
    <p>A logo redesign project made in Adobe Illustrator using the pen tool.</p>
    </div>
    
    </body>
    Thank you for reading!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    the text appears over the image, while the CSS background appears underneath it. I have tried as many z-index permutations as I could think of to fix this.
    Check http://www.htmldog.com/reference/cssproperties/z-index/
    Specifies the order of relative or absolutely positioned boxes in the z-axis. The higher the number, the higher that box will be in the stack.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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