darkblue Posted March 25, 2006 Share Posted March 25, 2006 Here's the deal. My layout goes as this:<div id="pagecell1"> <div class="feature"><h3>Temporary layout </h3> <p> Hi. This is the temporary page[...] </p> </div> <div class="story"> <h3>Be an[...]</h3> </div> <div class="story"> <table width="100%" cellpadding="0" cellspacing="0" summary=""> [stuff] </table> </div> </div> There is a background image, and the "pagecell1" div is white with black text. I want the cell to be about 75% opaque, so that we can see the background image through.I have a CSS page attached to it, and the main page was done in HTML.click here for a screenshot of the pageHow can I do this? Link to comment Share on other sites More sharing options...
calvin182 Posted March 25, 2006 Share Posted March 25, 2006 theres a css -moz-opacity: 0.75; tag but i think it only works for firefox and it doesnt validate as css 2.0.by the way, i like ur username, it reminds of the jacks mannequin song dark blue. Link to comment Share on other sites More sharing options...
darkblue Posted March 25, 2006 Author Share Posted March 25, 2006 Haha thanks, it's actually taken from the Jack's Mannequin song (my fave). I need something that would work for everything, IE, Mozilla, Metscape... >.< Link to comment Share on other sites More sharing options...
Err Posted March 25, 2006 Share Posted March 25, 2006 Transparent GIF. It works in all browsers. No PNG, m'kay? Link to comment Share on other sites More sharing options...
darkblue Posted March 25, 2006 Author Share Posted March 25, 2006 Transparent GIF. It works in all browsers. No PNG, m'kay?<{POST_SNAPBACK}> Okay, um. I'm that much of a noob, how do I do that? I mean... gifs? I'm talking about divs here, not images. It's the "pagecell" element I want to be see-through. Link to comment Share on other sites More sharing options...
rongyne Posted March 25, 2006 Share Posted March 25, 2006 Use this style and apply it to the cell or table you want to make transparent.Just ajust the opacity level and the color.<style>.transparent{border:000000 solid 1px;background: white;filter: alpha(opacity=75); } </style>Like this: <html><style>.transparent{border:000000 solid 1px;background: white;filter: alpha(opacity=75); } </style><body background = "http://www.absolutecross.com/images/textures/pack1/alien_roughterrain_thumb.jpg"><table><tr><td class = "transparent"><div id="pagecell1"><div class="feature"><h3>Temporary layout </h3> <p> Hi. This is the temporary page[...] </p></div><div class="story"> <h3>Be an[...]</h3></div><div class="story"> <table width="100%" cellpadding="0" cellspacing="0" summary="">[stuff]</table> </div> </div> </td></tr></table></body></html> If you want all your tables to be transparent by default, do this:<style>.table{border:000000 solid 1px;background: white;filter: alpha(opacity=75); } </style>if it is just the headers do this:<style>.th{border:000000 solid 1px;background: white;filter: alpha(opacity=75); } </style>etc............. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now