...

View Full Version : Opacity problem



Zangeel
07-26-2011, 06:43 AM
Hey guys, I'm designing a site, that has a background image, I added a div on the top of the page for navigation links, I made it translucent, but I need a way to have whatever I put IN the div not show up transparent so they're noticeable.

So it's something like this



<style type="text/css">
div.topbar {background-color:#fff; opacity:0.4; width:100% height:25px;}
</style>


and inside this div I have another div for my navigation, but I don't want the same transparency to apply.

Is there a work around for this?

vikram1vicky
07-26-2011, 09:33 AM
Hey guys, I'm designing a site, that has a background image, I added a div on the top of the page for navigation links, I made it translucent, but I need a way to have whatever I put IN the div not show up transparent so they're noticeable.

So it's something like this



<style type="text/css">
div.topbar {background-color:#fff; opacity:0.4; width:100% height:25px;}
</style>
and inside this div I have another div for my navigation, but I don't want the same transparency to apply.

Is there a work around for this?


Give opacity:1 to inner div....


:)

Zangeel
07-26-2011, 10:16 AM
Thanks for the reply, I tried this but to no avail, it still makes the inner div as transparent as the outer.

Try it locally and you'll see what I mean


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled 2</title>
</head>

<body>
<style>
body {background:url('http://mayang.com/textures/Architectural/images/Brick/long_thin_bricks_033120.JPG') repeat;}
.trans {width:400px; height:500px; opacity:0.5; background-color:#000;}
.inner {opacity:1; width:200px; height:200px; background-color:#ff0000;}
</style>
<div class="trans"><div class="inner">hmmmmmmmmmmmmmmmmmmmmmmmmm</div></div>

</body>
</html>

vikram1vicky
07-26-2011, 12:50 PM
Thanks for the reply, I tried this but to no avail, it still makes the inner div as transparent as the outer.

Try it locally and you'll see what I mean


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled 2</title>
</head>


<body>
<style>
body {background:url('http://mayang.com/textures/Architectural/images/Brick/long_thin_bricks_033120.JPG') repeat;}
.trans {width:400px; height:500px; opacity:0.5; background-color:#000;}
.inner {opacity:1; width:200px; height:200px; background-color:#ff0000;}
</style>
<div class="trans"><div class="inner">hmmmmmmmmmmmmmmmmmmmmmmmmm</div></div>

</body>
</html>



Dear,


<style> tag must always be in <head> tags only...

correct and check :)

JustinJD
07-26-2011, 12:52 PM
I was actually JUST about to post that! :P

Sammy12
07-26-2011, 06:22 PM
the <style> tag does not have to be put in the head section. in fact it works fine embedding them throughout your script if you want to target a specific area. im assuming he was going to move them at the end

for this type of issue you have two options

a) use rgb colors (browser support medium)
b) use a transparent overlay (which I believe you chosen)

however I suggest this approach:



.container {
width: 500px;
height: 400px;
position: relative;
}

div.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

div.opac.layer {
opacity: .9;
filter: alpha(opacity=90);
}




<div class="container">
<div class="opac layer"></div>
<div class="content">
<!-- Content Here -->
</div>
</div>



Layers are frequently used again and again, so I would suggest making a class for it now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum