954,591 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article
1 Year Ago
0

Div opacity problem

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

bubbafunk1
Newbie Poster
19 posts since Jun 2009
Reputation Points: 10
Solved Threads: 1
 
1 Year Ago
0

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

MattyRobot
Junior Poster in Training
73 posts since Aug 2009
Reputation Points: 33
Solved Threads: 8
 
1 Year Ago
0

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.

bubbafunk1
Newbie Poster
19 posts since Jun 2009
Reputation Points: 10
Solved Threads: 1
 
1 Year Ago
0

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%

MattyRobot
Junior Poster in Training
73 posts since Aug 2009
Reputation Points: 33
Solved Threads: 8
 
1 Year Ago
0

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

almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 
1 Year Ago
0

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?

bubbafunk1
Newbie Poster
19 posts since Jun 2009
Reputation Points: 10
Solved Threads: 1
 
1 Year Ago
0

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

MattyRobot
Junior Poster in Training
73 posts since Aug 2009
Reputation Points: 33
Solved Threads: 8
 
1 Year Ago
0

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>
bubbafunk1
Newbie Poster
19 posts since Jun 2009
Reputation Points: 10
Solved Threads: 1
 
1 Year Ago
0

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 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>
MattyRobot
Junior Poster in Training
73 posts since Aug 2009
Reputation Points: 33
Solved Threads: 8
 
1 Year Ago
0

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 */
}
vee_liang
Light Poster
38 posts since Aug 2008
Reputation Points: 25
Solved Threads: 8
 
1 Year Ago
0

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

MattyRobot
Junior Poster in Training
73 posts since Aug 2009
Reputation Points: 33
Solved Threads: 8
 
1 Year Ago
0

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

dzandman
Newbie Poster
1 post since Dec 2010
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged:
 
© 2012 DaniWeb® LLC
Home | About Us | Contact Us | Terms of Service | Advertising Opportunities
RSS Feed RSS Feed