div container opacity?

Aceramic

10-17-2007, 06:07 PM

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...)

<html>
<head>
<title>Cartennes Nations - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style></head>

<body>


<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>



<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. ;)

ez4me2c3d

10-17-2007, 09:22 PM

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
<!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>

CaptainB

10-17-2007, 10:06 PM

<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>

<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>



<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.

Aceramic

10-18-2007, 07:22 AM

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. :)

Arbitrator

10-18-2007, 09:52 AM

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.

_Aerospace_Eng_

10-18-2007, 03:24 PM

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.

Arbitrator

10-18-2007, 04:04 PM

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.