asked on

-moz-opacity issues

Hello, I have a design where I have a picture for the background with two tableless columns. I'm using -moz-opacity because I want to see the picture somewhat, but still have full opacity of the images, text and controls that I place within the columns. Currently everthing I put into column divs inhearit the opacity of the main coloumns. Hope I'm explaining this properly... How can I have the items appear at full opacity?

Here is my code:

CSS:
#content {
width: 760px;
margin: 0 auto;
background: #a7b2e6 url(graphics/bgContent2.jpg);
min-height: 500px;

}

#leftCol {
float: left;
width: 180px;
min-height: 500px;
background-color:white;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
-moz-opacity:0.20;filter:alpha(opacity=20);

}

#rightCol {
float: right;
width: 500px;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
background-color:white;
-moz-opacity:0.50;filter:alpha(opacity=50);
min-height: 500px;
}

HTML:

<div id="content">
<div id="navigation">
<span id="spanleft"><asp:ImageButton id="ibtnBannerHome" runat="server" ImageUrl="~/App_Themes/Winter/Graphics/Banner.gif"
      AlternateText="Home" ToolTip="Home"
      PostBackUrl="~/HR/Default.aspx"></asp:ImageButton></span>
      <ul>
      <li><a href="../default.aspx" accesskey="1" title="">Home</a></li>
      <li class="active"><a href="default.aspx" accesskey="2" title="">Here</a></li>
            <li><a href="FAQ.aspx" accesskey="3" title="">FAQ</a></li>
            <li><a href="Forms.aspx" accesskey="4" title="">Forms</a></li>
            <li ><a href="Events.aspx" accesskey="5" title="">Events</a></li>
            <li><a href="Links.aspx" accesskey="6" title="">Links</a></li>
            <li><a href="News.aspx" accesskey="7" title="">News</a></li>
</ul>
</div>
      <div id="leftCol">
            <h5>subnavigation</h5>

</div>
      <div id="rightCol">
      <h5>side bar</h5>

</div>
<div id="footer">
footer stuff
</div>
</div>

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gogetsome

ASKER

Can you point me in the right direction to
>position them in such a way that they only "seem" to be inside it.
A blog or tutorial would be great.

TName

I'll have a look for a tutorial - meanwhile, have a look at this example:

A container div (nothing special about this one, except that it has "position:relative;" defined, so that absolutely positioned children will position themselves relative to it - and not e.g. relative to the body).

This container div ("wrapper") has two child elements - the fake container, a semi-transparent div that covers the first div (it's parent) completely (doesn't really have to cover it completely...) and that doesn't contain anything, except some text.

Another div, an opaque one, that is positioned absolutely above the semi-transparent div, but is not it's child (they are siblings).
So we see an opaque div inside a transparent div.

To see the difference, you can move (in the html markup) the #innerDiv into #fakeContainer - it will immediately have a reduced opacity itself.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#wrapper {
position:relative;
margin: 100px;
width:600px;
height:400px;
background:#fff;
       border:1px solid #ddd;
}

#fakeContainer {
height:100%;
       padding-left:10px;
background:#000;
       color:#fff;
opacity:.75;
filter: alpha(opacity=25);
-moz-opacity: 0.25;
}

#innerDiv{
position:absolute;
       left:50px;
       top:60px;
z-index: 4;
width:250px;
margin:25% 0 0 35%;
background: #fff;
border:3px solid #f00;
padding:25px;
text-align:center;
opacity:none;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="fakeContainer">
This semi-transparent box is black with white text
</div>

<div id="innerDiv">
<p>Black text over a transparent box</p>
</div>

</div>

</body>
</html>

</body>
</html>

gogetsome

ASKER

Thanks! I will give this a try.