I have my wrapper background colour set with an opacity of 80% using this code

#wrapper {
background: #ffffff;	
opacity: 0.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-khtml-opacity: 0.8;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

It works fine but everything inside of the wrapper is now set to 80% opacity. I have two divs .left and .right and everything including their backgrounds, images, text etc is set to 80% opacity. Is there a workround? something simple that I a missing?

Any ideas much appreciated.

Kevin

this might work:

#wrapper {
background: #ffffff;	
opacity: 0.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-khtml-opacity: 0.8;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

#wrapper *
{
opacity: 1;
filter:alpha(opacity=100);
-moz-opacity:100;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-khtml-opacity: 0.8;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
}

the * means everything

Thanks for your reply, I tried it but it does not work, i think the * sign is used in mysql where it means everything or all. I only want the the wrapper to have an 80% opacity, not the other divs inside of it. I just need a work around for that problem.

no it works for css i tried it and it did work
the #wrapper * means everything inside wrapper
so wrapper opacity 80%
everything inside 100%

bubbafunk
Yes * means everything BUT Context is King

elementA {space} * means everything that is a child of elementA
just as the robot has written
why it didnt work, for YOU, will have to wait till a guru comes along, I dunno

I have set the back grounds of .left and .right to #ffffff, and used the css like this

#wrapper {
	width: 860px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 5px;
	padding-left: 5px;
	background: #ffffff;	
	opacity: 0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	-khtml-opacity: 0.8;
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
	}
	
	
#wrapper * {
	opacity: 1.0;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-khtml-opacity: 1.0;
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
	}

Its not working, have i done something wrong?

could I see the html as well as there doesn't appear to be anything wrong with the css

Here is the html,thpough everything looks and works fine with the html, except the opacity issue.

<body>

<div id="wrapper">

<div id="left">
  <img src="images/logo.jpg"  width="163" height="132" class="des_logo" />
 
<ul class="side_nav">

<li class="main_nav"> <a href="#">Company Profile<br/> 
<span class="main_nav_2">A bit about our company</span></a></li>

</ul>
 
</div>
<div id="right"> 
<div id="top">
<div class="top_nav">

    <ul>
    <li><a href="#"> Home</a> </li>
    <li><a href="#"> Contact</a> </li>
    </ul>
    
</div>
<div class="top_tels">Bristol: <span class="tels">000000000</span> | Bath: <span class="tels">00000000</span> | Mendip: <span class="tels">00000000</span></div>
</div> 

<div id="flash">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="645" height="250">
    <param name="movie" value="header_v2_3.swf" />
    <param name="quality" value="high" />
    <embed src="header_v2_3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="645" height="250"></embed>
  </object>
</div>

<div id="page_headers">Home</div> 
<div id="content">
   <p>here is some content text</p>
</div>

</div>

<div id="footer">

<div class="address">
<p> address</p>
  <div class="footer_tels">
 <p> Tel: 000000</p>
  
</div>
  
</div>
</div> 
</body>
</html>

no offence but the code is a little messy.

there were a few mistakes where some elements were not closed and there was not starting <html> tag

I have indented the code and fixed the issues and it renders correctly in firefox (i checked the opacity with firebug :P)

<html>
	<head>
		<style type="text/css">
			#wrapper {
				width: 860px;
				margin-left: auto;
				margin-right: auto;
				padding-right: 5px;
				padding-left: 5px;
				background: #ffffff;	
				opacity: 0.8;
				filter:alpha(opacity=80);
				-moz-opacity:0.8;
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				-khtml-opacity: 0.8;
				-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
				}
				
				
			#wrapper * {
				opacity: 1.0;
				filter:alpha(opacity=100);
				-moz-opacity:1.0;
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
				-khtml-opacity: 1.0;
				-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
				}
		</style>
	</head>
	
	<body>

		<div id="wrapper">

			<div id="left">
				<img src="images/logo.jpg"  width="163" height="132" class="des_logo" />
				 
				<ul class="side_nav">

					<li class="main_nav">
						<a href="#">Company Profile<br/> 
						<span class="main_nav_2">A bit about our company</span></a>
					</li>

				</ul>
			 
			</div>
			<div id="right"> 
				<div id="top">
					<div class="top_nav">

						<ul>
							<li><a href="#"> Home</a></li>
							<li><a href="#"> Contact</a></li>
						</ul>
						
					</div>
					<div class="top_tels">Bristol: <span class="tels">000000000</span> | Bath: <span class="tels">00000000</span> | Mendip: <span class="tels">00000000</span></div>
				</div> 

				<div id="flash">
					<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="645" height="250">
						<param name="movie" value="header_v2_3.swf" />
						<param name="quality" value="high" />
						<embed src="header_v2_3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="645" height="250"></embed>
					</object>
				</div>

				<div id="page_headers">Home</div> 
				<div id="content">
				   <p>here is some content text</p>
				</div>

			</div>

			<div id="footer">

				<div class="address">
					<p> address</p>
					<div class="footer_tels">
						<p> Tel: 000000</p>
					  
					</div>
					  
				</div>
			</div> 
		</div>
	</body>
</html>

Basically whatever it is that you wrote on "main layer" will be inherited to all its sub-layers. e.g:

HTML code:

<div id="container">
    <div id="content">
      Some text that are supposed to be on top of a "rather transparent" background
    </div>
</div>

CSS code:

#container {
   background-color: #ffffff;  /* the background          */
   filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   opacity: 0.5;               /* newer Mozilla and CSS-3 */
}
#content {
   filter:alpha(opacity=100);  /* discarded */
   -moz-opacity:1.0;           /* discarded */
   opacity: 1.0;               /* discarded */
}

All sub-layers within the container layer inherit the container layer's nature so all of the text on content layer in my case will have 50% opacity. This your issue I supposed hope you know have a better understanding on your issue. As for the solution to it, well there are some ways but I let your imagination and creativity to solve your own issue. I'll show the simplest workaround for your issue which is by rearranging your layers.

HTML code:

<div id="container">

   <div id="content">
      This is a normal text
      on a translucent background
   </div>

   <div id="background">
       
   </div>

</div>

CSS code:

#container {
   position: absolute;
   top: 10px; left: 25px;         /* place it where you want     */
}

#background {
   width: 250px; height: 100px;     /* to match DIVs size          */
   background-color: #ffffff;       /* the background              */
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   opacity: 0.5;
}

#content {
   width: 250px; height: 100px;     /* to match DIVs size          */
   background-color: transparent;   /* transparent background      */
   position: absolute;              /* absolute positioning        */
   z-index: 2;                      /* place it over the other DIV */
}

or the generic #wrapper * applies to anything inside wrapper rather than specificly setting the opacity for every child element.

Hi Vee-
Not sure if you'll see this, but I was hoping you might be able to help me implement your solution with the JS Accordion (my site is dzandman.com). I can't figure out how to change the div names that the JS uses without breaking the whole thing.

Thanks!
David

Try this:

background-color: rgba(255, 255, 255, 0.5);
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.