Help with CSS

[cheesepoof453]

I have a transparant content box, but I want the text to remain black. I also want the .banner class to be aligned at the absolute top and left.



body
{
background-color: #dcf1c1;
background-image: url('images/layout/background_tile.png');
background-repeat: repeat-x;
}
.banner
{
background-image: url('images/layout/banner_tile.png');
background-repeat: repeat-x;
width: 100%;
}
.content
{
background-color: #ffffff;
opacity: 0.15;
-moz-opacity: 0.15;
filter: alpha(opacity=15);
width: 85%;
height: 100%;
}
.text
{
color: #000000;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
.text a, a:link, a:active
{
color: #000000;
font-weight: bold;
font-style: italics;
}
.text a:hover
{
color: #000000;
font-weight: bold;
}
.text a:visited
{
color: #000000;
font-style: italics;
}

[Wickham]

The banner posuition should be controlled by adding position: absolute; top: 0; left: 0;

The black text in the transparent box is a little more difficult because opacity affects everything in a div including text and including all divs contained in the outer div. Elements inside cannot return to an opacity of 1.0, they always inherit the opacity value.

However, you can have one div with transparency (opacity) and another div with no opacity (black text) positioned over the top of it.

See item 3c here:-
http://www.wickham43.supanet.com/tutorial/opacity.html