Results 1 to 19 of 19
-
08-28-2003, 02:21 AM #1Newbie
- Join Date
- Aug 2003
- Posts
- 18
Table Cell Opacity / Transparent ??????????
hey hi
i would like to know how i can make a table cell kind of transparent... where you can see the background color and see that behind it there's a background image
example:
<table background="someiage.gif" cellspacing="10">
<tr>
<td bgcolor="#808080" class="opaque">
any ideas?? tanx in advance
-
08-28-2003, 03:38 AM #2Newbie
- Join Date
- Aug 2003
- Posts
- 25
I have never known that you can make a cell transparent.. Cool! I will definitely have to subscribe to this thread to see if anyone can share their knowledge..
-Will
-
08-28-2003, 03:52 AM #3Newbie
- Join Date
- Oct 2002
- Posts
- 25
I am not sure if this is possible either. I have been searching on www.htmlgoodies.com but haven't found a reference to that yet.
You might want to try sending an email asking that very question. It is one of the places you should be able to get the answer from.
"Simple Hosting Solutions For Real People"
http://www.pharkus.com
pharkus@pharkus.com
PayPal :: Money Order :: Check
-
08-28-2003, 09:03 AM #4Web Hosting Evangelist
- Join Date
- Aug 2001
- Location
- NE Ohio
- Posts
- 502
I've been wondering the same thing for a while now. I've seen it done on a website before but I forgot to save the source code. I'm pretty sure CSS is involved.
-
08-28-2003, 09:24 AM #5Newbie
- Join Date
- Aug 2003
- Location
- Pune, India
- Posts
- 17
I don't know if it's possible using CSS, but you can definitely do it using a 4px GIF.
Make a new 4 pixel file. Colour the top left and bottom right pixels with the colour you want the cell to be. Leave the other two pixels white (or some other colour). Save the file as a .gif and set the transparent colour to white (or the other colour). Use this image as your cell bg and you should have a cell with a transparent background.
If anyone can tell me how it's done with CSS, I'd be glad to know...
-
08-30-2003, 01:28 AM #6Web Hosting Master
- Join Date
- Aug 2003
- Posts
- 2,625
I think Deathdart has it figured out. I have never seen it done with code, it is more of a graphical thing.
I might just keep my eye on this thread (like the rest of you) to see if there is an "all-mighty" that could share his/her infinite wisdom.
Thanks.SuperWebHost.com, a Digitally Justified Company
Celebrating our 9th year in Business
Proudly Hosting with CANADIAN bandwidth
Managed Hosting, Multi-Domain Hosting, Colocation, Merchant Accounts
-
08-31-2003, 11:57 AM #7Web Hosting Evangelist
- Join Date
- Aug 2001
- Location
- NE Ohio
- Posts
- 502
I found this example website, is this what you're trying to do?
http://www.option5.net/testing/
-
08-31-2003, 01:28 PM #8Newbie
- Join Date
- Aug 2003
- Posts
- 18
i did it here:
http://rapreport.com/klr/bio.htm
check out the code there... if anyone figures out how that code works please tell me becuz i subtracted alot from it.. i forgot where i got it from
i will try the image 4 pixel thing, sounds like it will work, good thinkin
tanx
check the site i'm doing this to @ www.305hiphop.com
-
08-31-2003, 01:57 PM #9Newbie
- Join Date
- Aug 2003
- Posts
- 18
i tried several ways to do the pixel thing but i dont' like how it looks.. i'm going to try to mess with that code, if yall didn't see it this is the source
PHP Code:<head>
<style>
.a{z-index:10;position:absolute; height:40;width:150;top:50;left:12;border:000000 solid 1px;padding:5;background:fee;font:11;color:000;}
</style>
</head>
<body background="http://www.rapreport.com/klr/images/122502_03.gif" bgproperties="fixed">
<div class=a id=1 style="width: 400; height: 105">wordsgohere</div>
<div class=b id=2 onmouseover="st1(20,2)" onmouseout="st2(80,2)"></div>
<div class=c id=3 onmouseover="st1(20,3)" onmouseout="st2(80,3)"></div>
<div class=d id=4 onmouseover="st1(20,4)" onmouseout="st2(80,4)"></div>
<div class=e id=5 onmouseover="st1(20,5)" onmouseout="st2(80,5)"></div>
<div class=g id=7 style="cursor:w-resize" ></div>
<script>
aus();
function st1(a,id){
i=a;i+=19;
document.getElementById(id).style.letterSpacing=i/9;
document.getElementById(id).style.filter='alpha(opacity='+i+')';
if (i<90){setTimeout('st1('+i+','+id+')',1)}return(i)}
function st2(a,id){
i=a;i-=5;
document.getElementById(id).style.letterSpacing=i/13
document.getElementById(id).style.filter='alpha(opacity='+i+')';
if (i>50){setTimeout('st2('+i+','+id+')',1)}}
function aus(){
for (z=1;z<=5;z++){
document.getElementById(z).style.filter='alpha(opacity=60)';
document.getElementById(z).style.letterSpacing=2;
document.getElementById(7).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=130,color=black,strength=5)'}
}
;
</script>
</body>
-
08-31-2003, 02:30 PM #10Web Hosting Master
- Join Date
- Aug 2003
- Posts
- 2,625
In the 2 working examples above, they are both using layers using the DIV tag. I can't remember all the browsers, but it is not supported by quite a few of them.
You may want to check compatibility!
Thanks.SuperWebHost.com, a Digitally Justified Company
Celebrating our 9th year in Business
Proudly Hosting with CANADIAN bandwidth
Managed Hosting, Multi-Domain Hosting, Colocation, Merchant Accounts
-
08-31-2003, 02:52 PM #11Newbie
- Join Date
- Aug 2003
- Posts
- 18
ok.. but i been playing with the coding and you don't need to use the DIV this is using styles
now i'm lookin into DXImageTransform opacity
-
08-31-2003, 03:49 PM #12Newbie
- Join Date
- Aug 2003
- Posts
- 18
CHECK IT !!! I DON DONE IT !! YAY !!
i found out how to do it and its using CSS style or whatever
Code:<style> .a{border:000000 solid 1px;background: white;filter: alpha(opacity=90); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity: 90%;} </style>
PHP Code:<table class=a
or
<td class=a
-
08-31-2003, 04:26 PM #13WHT Addict
- Join Date
- Apr 2003
- Posts
- 126
Hey,
I don't know if it's relevant to your site/page, but I believe this is an IE only possibility..
B
-
08-31-2003, 04:56 PM #14Newbie
- Join Date
- Aug 2003
- Posts
- 18
its ko.. cuz what may happen if it don't work ? the default correct ? also i've checked my statistics and 96.89 % (103266) people on my site use IE
but i appreciate you tellin me this, good lookin
-
08-31-2003, 07:09 PM #15Web Hosting Evangelist
- Join Date
- Aug 2001
- Location
- NE Ohio
- Posts
- 502
If you do it using the CSS styles, the text in the <table> or <td> is also affected by the opacity. The result would be similar to the link I posted above. Everything in the table on the left is affected by the 80% opacity while the table on the right only the background is 80% while the text (and images) themselves are unaffected.
-
08-31-2003, 07:38 PM #16Newbie
- Join Date
- Aug 2003
- Posts
- 18
hu.. i'm not sure about all that but i do know i got what i wanted.. now i'm trying to find the coding for the shadow.. i did it by mistake.. then i lost it.. now i'm lookin again.. i'm searching in microsoft site .. have any of yall worked with MSDN ?
-
08-31-2003, 08:37 PM #17Web Hosting Evangelist
- Join Date
- Aug 2001
- Location
- NE Ohio
- Posts
- 502
I guess it all depends on how your are designing your site. If you set the ocpacity to 10%, the table AND the text be 10% visable. But, if you use the code for the table on the right side on this page, only the table background will be 10% and the text will be unchanged (100%).
I highly doubt the shadowing will be on microsoft.com or MSDN, search on google.com for CSS shadow or something like that.Last edited by El Nino; 08-31-2003 at 09:03 PM.
-
12-13-2005, 09:41 AM #18New Member
- Join Date
- Dec 2005
- Posts
- 1
the links are now dead.
I made a table/cell transparent, but what is the code to keep the text visible (NOT transparent) as "Nino" explains above?
Would it be possible to post this code again? (transparent background on table, and text NOT transparent)
thanks!
-
12-13-2005, 04:47 PM #19Newbie
- Join Date
- May 2005
- Posts
- 16
El nino is right if you use "alpha(opacity= );" everything in the table will be afected by the opacity, but css might save you
You will use div container to define a color which is transparent and use another div container "position:absolute" to handle the text