PDA

View Full Version : Help with CSS



cheesepoof453
04 Oct 2007, 07:53 PM
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
05 Oct 2007, 01:40 AM
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