SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    915
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    z-index issue with greyed out layer

    I have craeted a greyed out layer that sites above the website when called, and inside that I have another div, and its this div that is confusing me.

    I am using z-index to try and get the inner div to not adopt the alpha transpareny of its parent div, and its just not working.

    Here is the css:

    Code:
    #cover{
    	position:absolute;
    	top:0px;
    	left:0px;
    	overflow:hidden;
    	width:100%;
    	height:1500px;
    	background-color:#000000;
    	opacity:0.5;
    	MozOpacity:0.5;
    	z-index:10;
    	filter:alpha(opacity=50);
    	text-align:center
    }
    #warning{
    	margin:auto;
    	position:relative;
    	width:400px;
    	height:200px;
    	background-color:white;
    	color:black;
    	padding:10px;
    	opacity:1.0;
    	MozOpacity:1.0;
    	z-index:100;
    	filter:alpha(opacity=100);
    	top:200px;
    	margin-left:auto;
    	margin-right:auto;
    }
    Here is the html:

    HTML Code:
    <div id="cover">
    <div id="warning">
    <p align="center">
    <input type="button" onClick="javascript:location.href=('http://www.);" value="Return to admin" />
    </p>
    </div>
    </div>	
    Its working fine and appearing when i want it too, but the warning div adopts the transparency of cover and the effect isnt right, as i wont warning to be a solid colour.

    Cheers

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Opacity is automatically transferred to children. There is no way around that using pure CSS. You must use the techniques listed in this quiz, which interestingly enough, we had. It's basically just modifying HTML mostly, and then matching up some CSS to make it fit. You'll see.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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