-
Jun 9th, 2006, 04:24 PM
#1
Thread Starter
Junior Member
Semi-Transparent Table Background
I have tried many different css code and still no luck.
Here's what i'm looking for. For the Page Background I have and Image, For the tables on top I have there backgrounds set to black. I need the table backgrounds to be about 50% transparent. The images, the text, and the border cannot be transprent only the background of the tables. I'm sure its possibe I just haven't found it yet.
Thanks,
TheHolyMessiah
-
Jun 10th, 2006, 02:15 AM
#2
Re: Semi-Transparent Table Background
It's not possible, not per se; as opacity affects all of an element including text, there is no background-opacity property as such (although it would be very nice).
You need to overlay an element containing the text, with no background, over the semi-translucent background element. You would need absolute positioning or some float trickery for this (say, floating the background element but not the text element). Impossible to suggest a concrete solution without seeing your layout and HTML code, but see if you can do something with that.
-
Jun 10th, 2006, 02:35 AM
#3
Thread Starter
Junior Member
Re: Semi-Transparent Table Background
I found some using png files, here is and example of what I'm talking about. This page uses a transparent png as a background for the tables and some how it works like its supposed to. So I think on going to go with this it seems to work like I want it to, Thanks anyways.
Example
TheHolyMessiah
-
Jun 10th, 2006, 02:37 AM
#4
Re: Semi-Transparent Table Background
That's a really neat idea. I never thought of that. Thanks for the link
-
Jun 28th, 2006, 10:57 AM
#5
New Member
Re: Semi-Transparent Table Background
Im not 100% sure how its done, but I know it is possible, but it seems to only work in Firefox, not IE. I have the tables on myspace set up with a black transparent background. I stumbled apon this thread trying to find a way to get the same effect in Internet Explorer.
http://www.myspace.com/cbzed101
Someone on here might be able to view the page source and figure out exactly what lines of code are required to get the effect, but again, it seems to only work correctly in FireFox or mozilla powered browsers.
BTW, its been about 5 years since I lasted worked with HTML, I've gone to using Dreamweaver or other WYSIWYG editors.
Also, TheHolyMessiah, I noticed that you get a nice effect with a about 25% transparent background in Firefox, but then in IE the background is 100% transparent.
If anyone ever figures out a way to get a good transparent effect going in IE let us know.
Last edited by CBZED101; Jun 28th, 2006 at 11:03 AM.
-
Jun 28th, 2006, 11:09 AM
#6
Re: Semi-Transparent Table Background
-
Jun 28th, 2006, 11:34 AM
#7
New Member
Re: Semi-Transparent Table Background
Originally Posted by JPnyc
Thats pretty much what we're lookin for, just if theres a way to keep the text and images opaque and only have the table background transparent, its gotta be possible, I know it is in FF, but IE doesn't seem to like png table backgrounds.
-
Jun 28th, 2006, 12:16 PM
#8
Re: Semi-Transparent Table Background
IE doesn't do png transparency. With the css attribute, you can target any element you want. Forget about the png transparency altogether and use CSS.
-
Jun 29th, 2006, 05:51 AM
#9
Thread Starter
Junior Member
Re: Semi-Transparent Table Background
According to the example site I posted, it is possible to use transparent png's in IE. But I think its only possible for me because I have IE 7. Thanks for the help.
TheHolyMessiah
-
Jun 29th, 2006, 05:56 AM
#10
Thread Starter
Junior Member
Re: Semi-Transparent Table Background
Sorry to double post, but CBZED101 your myspace works fine on IE 7 and its just what I was looking for. What did you do to get that to work? I would really appreciate it if you could tell me.
Thanks,
TheHolyMessiah
-
Jun 29th, 2006, 07:35 AM
#11
Re: Semi-Transparent Table Background
It appears to require JavaScript to work, because it didn't work until I allowed "hotget.com" to work with NoScript. I tend not to like to use any JavaScript that drastically changes the look of the site, because design and look is the worry for CSS.
I first thought CBZED101 only advertised his own site without it actually being related to the topic at all.
-
Jun 29th, 2006, 09:24 AM
#12
New Member
Re: Semi-Transparent Table Background
Originally Posted by Merri
I first thought CBZED101 only advertised his own site without it actually being related to the topic at all.
I was actually a little concerned that someone would think that when I first decided to use my page as an example.
Originally Posted by Merri
because it didn't work until I allowed "hotget.com" to work with NoScript.
The thing with hotget.com and the noscript thing is caused by that music video I have on my page, as far as I know. I haven't worked with HTML or any language for a few years, but when setting up my page I put in a music video and I noticed when I was removing the control bar from the media player, it had a "noscript" parameter defined. The actuall style of the page looks to be all done with CSS.
Originally Posted by TheHolyMessiah
What did you do to get that to work? I would really appreciate it if you could tell me.
I wish I knew exactly how it works, but Im not sure, I belive it uses the same idea as what you used on your page, with the transparent PNG images. I used a myspace page-generator to get the look of the page. I looked at the page source and did a search for PNG and found 1 image, opened it in a new browser and it was just a transparent black PNG image. The backgrounds on the tables were all set to "transparent" an the background was set to that PNG image. All appeard to be defined in CSS Script.
Also, you answerd one of my questions in your post, I was wondering if IE7 was going to allow transparent PNG images.
-
Jun 29th, 2006, 09:44 AM
#13
Re: Semi-Transparent Table Background
I made up this example: http://merri.net/xhtml_ja_css/opacity/
It is also a perfectly valid XHTML page. CSS also validates; CSS for IE hidden within conditional comments wouln't validate, of course. It uses the PNG image technique and a filter for IE6 and below.
CBZED101: NoScript is an extension to Firefox that disables JavaScript by default. I use it for additional security.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|