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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts

    div container opacity?

    Disclaimer: I am very new to CSS so far, so this may be obvious to some. :)

    Apperently, I need some help... I've done this exact same thing before, I've compared my current code to the previous code, and I cannot figure out why it works in the previous one, but not this one...

    Basically, what's happening is the opacity takes effect on the "container" (such as it is), and then (for some reason I can't figure out) continues to take effect in the next div tag, which contains the text. Complete code included below: (Note, I just started this, so it may still be a bit messy...)

    Code:
    <html>
    <head>
    <title>Cartennes Nations - Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    body,td,th {
    	color: #7B1113;
    }
    body {
    	background-color:#FFFFFF;
    }
    
    .background {
    	filter:alpha(opacity=80);
    	opacity:0.8;
    	background-color:#000000;
    	border:2px solid #FF9900;
    	width:80%;
    	height:100%;
    	position:absolute;
    	left:10px;
    }
    
    #content {
    	filter:alpha(opacity=100);
    	opacity:1.0;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-color:#FFFFFF;
    }
    -->
    </style></head>
    
    <body>
    
    <!-- Begin banner map -->
    <p><img src="images/NavBanner1.png" alt="Banner Image" width="750" height="180" border="0" usemap="#Map" />
        <map name="Map">
          <area shape="poly" coords="96,151" href="#">
          <area shape="poly" coords="97,152,153,152,138,173,81,173" href="index.html" target="_self">
          <area shape="poly" coords="165,152,224,152,206,172,147,173" href="about.html" target="_self">
          <area shape="poly" coords="235,152,292,152,275,173,217,174" href="contact.html" target="_self">
          <area shape="poly" coords="304,152,362,152,345,173,286,172" href="rules.html" target="_self">
        </map></p>
    <!-- End banner map -->
    
    <!-- Begin site content -->
    <div class="background">
    	<div id="content">Welcome to Cartennes Nations!</div>
    </div>
    
    </body>
    </html>

    Yeah, I know... Hotspots aren't the greatest thing. But I don't know of another way to get the buttons to work. That's irrelevant anyways. ;)

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    Minneapolis, MN
    Posts
    208
    Thanks
    0
    Thanked 1 Time in 1 Post
    My belief is, your messing with a CSS property that is not fully supported, therefore you are running into a bug. I feel my example demonstrates this nicely
    Code:
    <!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" xml:lang="en" lang="en">
    	<head>
    		<title>http://www.yoursite.com</title>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		<meta http-equiv="Content-Language" content="en-us" />
    		<style type="text/css">
    			#outter1, #outter2, #outter3 {
    				width: 400px;
    				padding: 50px;
    				filter:alpha(opacity=50);
    				opacity: .5;
    				background-color: #000;
    				border: 5px solid red;
    			}
    			#inner1 {
    				position: absolute;
    				top: 20px;
    				left: 400px;
    				width: 100px;
    				padding: 50px;
    				background-color: #000;
    				border: 5px solid blue;
    			}
    			#inner2 {
    				width: 100%;
    				filter:alpha(opacity=50);
    				opacity: .5;
    				padding: 50px;
    				background-color: #000;
    				border: 5px solid blue;
    			}
    			#inner3 {
    				width: 100%;
    				padding: 50px;
    				background-color: #000;
    				border: 5px solid blue;
    			}
    
    			li { margin-bottom: 20px; }
    		</style>
    	</head>
    	<body>
    	<ol>
    	<li>
    		<div id="outter1">
    			<div id="inner1">
    				<p>Inner DIV 1</p>
    			</div>
    		</div>
    	</li>
    	<li>
    		<div id="outter2">
    			<div id="inner2">
    				<p>Inner DIV 2</p>
    			</div>
    		</div>
    	</li>
    	<li>
    		<div id="outter3">
    			<div id="inner3">
    				<p>Inner DIV 3</p>
    			</div>
    		</div>
    	</li>
    	</ol>
    	</body>
    </html>
    anthony

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Code:
    <html>
    <head>
    <title>Cartennes Nations - Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body,td,th {
    	color: #7B1113;
    }
    body {
    	background-color:#FFFFFF;
    }
    
    .background {
    	filter:alpha(opacity=80);
    	-moz-opacity:0.80;
    	opacity:0.8;
    	background-color:#000000;
    	border:2px solid #FF9900;
    	width:80%;
    	height:100%;
    	position:absolute;
    	left:10px;
    }
    
    #content {
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-color:#FFFFFF;
    } 
    </style>
    </head>
    
    <body>
    <!-- Begin banner map -->
    <p><img src="images/NavBanner1.png" alt="Banner Image" width="750" height="180" border="0" usemap="#Map" />
        <map name="Map">
          <area shape="poly" coords="96,151" href="#">
          <area shape="poly" coords="97,152,153,152,138,173,81,173" href="index.html" target="_self">
          <area shape="poly" coords="165,152,224,152,206,172,147,173" href="about.html" target="_self">
          <area shape="poly" coords="235,152,292,152,275,173,217,174" href="contact.html" target="_self">
          <area shape="poly" coords="304,152,362,152,345,173,286,172" href="rules.html" target="_self">
        </map></p>
    <!-- End banner map -->
    
    <!-- Begin site content -->
    <div class="background">
    	<div id="content">Welcome to Cartennes Nations!</div>
    </div>
    
    </body>
    </html>
    I think that should work. Also, you need to delcare a vaild doc type.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Thank you, CaptainB, I will try that tomorrow, see if it works. As for the doctype, that's missing thanks to the combination of Dreamweaver, Photoshop, Illustrator, and me not noticing it was missing until after I posted that.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Aceramic View Post
    Basically, what's happening is the opacity takes effect on the "container" (such as it is), and then (for some reason I can't figure out) continues to take effect in the next div tag, which contains the text.
    The opacity property is not inherited. It affects all child elements of an element and can’t be overridden.

    To get a semi‐opaque background behind fully opaque text, you’ll need to use a semi‐opaque PNG image as a background; overlap an opaque element over a semi‐opaque element (where the former is not a child element of the latter); or wait for better CSS3 Color module support (i.e., support for rgba or hsla color values for use as background colors).

    With regard to the above methods, it’s worth noting that Internet Explorer 6 does not support alpha transparency in PNG images and no release version of any Windows browser supports rgba or hsla color values (although several test versions do).

    You can see a demo demonstrating the mentioned methods at http://www.jsgp.us/demos/cf125904.html.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Stu Nicholls seems to make it work on his site
    http://www.cssplay.co.uk/opacity/png.html

    Method 1 is what I'm referring to.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Stu Nicholls seems to make it work on his site
    http://www.cssplay.co.uk/opacity/png.html

    Method 1 is what I'm referring to.
    Looks like the same technique used in the second example of my demo. His version doesn’t need scripting though since it uses fixed dimensions for the background element.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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