+- MacResource (https://forums.macresource.com)
+-- Forum: My Category (https://forums.macresource.com/forumdisplay.php?fid=1)
+--- Forum: Tips and Deals (https://forums.macresource.com/forumdisplay.php?fid=3)
+--- Thread: CSS help (/showthread.php?tid=49411)
Pages:
1
2
CSS help - bazookaman - 02-14-2008
So i've laid out my site with mostly CSS. header, 2 columns and a footer.
Here is the CSS for my main column:
#main {
float:left;
width:550px;
padding-top: 38px;
background: url(../images/ground-content.gif) no-repeat center 19px;
opacity: 0.4;
filter: alpha(opacity=40);
}
#main p {
font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
padding:0px 38px;
}
I have the opacity adjusted to allow the background image to show through the "ground-content.gif". It works great in mac and PC and IE even. However, it also makes my text fade too. So my question is how do I do the above, but w/o making the text transparent too?
Re: CSS help - Greg the dogsitter - 02-14-2008
Maybe put the text into a with different css properties?
Re: CSS help - bazookaman - 02-14-2008
yeah. i tried that. no dice.
I'm sure there is a solution. Or maybe there isn't. Its a really nice effect.
Re: CSS help - M A V I C - 02-14-2008
That works in IE6?
Re: CSS help - bazookaman - 02-14-2008
yeppers.
you know. except for the whole turning my text translucent too.
Re: CSS help - M A V I C - 02-14-2008
doh! missed the filter: alpha
Try setting #main p to having an opacity and alpha of 100%.
Re: CSS help - bazookaman - 02-14-2008
I tried this to no avail:
#main {
float:left;
width:550px;
padding-top: 38px;
background: url(../images/ground-content.gif) no-repeat center 19px;
opacity: 0.4;
filter: alpha(opacity=40);
}
#main p {
font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
padding:0px 38px;
opacity: 1.0;
filter: alpha(opacity=100);
}
Re: CSS help - M A V I C - 02-14-2008
Is it a div? If so, try div#main for the first one.
If you happen to have a link to the code, that might help.
Re: CSS help - bazookaman - 02-14-2008
here is the page...
http://www.sterilmedrepair.com/SM2/pages/dummy2.shtml
here is the stylesheet...
http://www.sterilmedrepair.com/SM2/styles/styles.css
Both are rough at this point and need refining.
Re: CSS help - bazookaman - 02-14-2008
the #main div comes first so everything contained therein is affected by its style. Right?
So is there a way to place the image that I've got in the main div elsewhere? And then the main div can sit on top of it.