Transparency

Barrucadu · 10-23-2006, 06:08 AM

How would I make a table have a semi-transparent background, but one of the cells have a fully opaque background?

I know you can do it in ie:

Code:

<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
	<tr>
	     <td style="position: relative;">Woo! Opaque!</td>
	</tr>
         <tr>
	     <td>Woo! 50% Opaque!</td>
	</tr>
</table>

How would I change that code to work in other browsers?

andysyme · 10-23-2006, 06:30 AM

Warning: Very cheap and nasty, but all I could come up with at the moment

Code:

<table height="200" width="200" border="1" style="filter: alpha (opacity=50);">
	<tr>
	     <td bgcolor="#FF0000" style="position: relative;">Woo! Opaque!</td>
	</tr>
         <tr>
	     <td bgcolor="#FF0000" style="-moz-opacity:.40;">Woo! 50% Opaque!</td>
	</tr>
</table>

I have left your IE handling as is. I use the -moz-opacity for firefox. However, I had to style each cell individually. Have a play and you'll get the idea!

There must be a neater way, just haven't found it yet!

Andy

Barrucadu · 10-23-2006, 06:36 AM

FOUND THE CODE

Code:

<style>
/*Transparency*/
#one {
	position: relative;
}
#two {
	z-index: 5;
	position: relative;
}
#thr {
	background-color: #FFFFFF;
	border: 1px solid black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

<div id="one">
<div id="thr"></div>
<div id="two">
Content Goes Here
</div></div>

Demo: http://www.white-knights-templar.com/phpBB2/index.php

The CSS method dosnt work in IE, so i'm going to have to mess around with it until it does...

ethix · 10-23-2006, 06:49 AM

i did a code "years" ago which may help it is here
http://pbsupport2.proboards29.com/in...ead=1094952802

it appears that board is closed to non members(i havnt been there for ages)

EDIT: oh well i tried to paste the code here but the forum wouldnt allow me

Quote:

1. You have included too many images in your signature or in your previous post. Please go back and correct the problem and then continue again.

Images include use of smilies, the vB code [img] tag and HTML <img> tags. The use of these is all subject to them being enabled by the administrator.

Barrucadu · 10-23-2006, 06:52 AM

Woo! I got it working!

Here is the IE, Firefox and Opera version:

Code:

<style>
/*Transparency*/
#one {
	position: relative;
}
#two {
	z-index: 5;
	position: relative;
}
#thr {
	background-color: #FFFFFF;
	border: 1px solid black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

<comment><div id="one">
<div id="thr"></div>
<div id="two"></comment>
<!--[if IE]><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center" style="filter: alpha (opacity=50);background-color:#FFFFFF;"><![endif]-->
<comment><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center" style="background-color:#FFFFFF;"></comment>
<tr>
<td><!--[if IE]><div style="position:relative;"><![endif]-->
Content Goes Here
</td></tr></table>
<comment></div></div></comment>

10-23-2006, 06:08 AM	#1 (permalink)
Barrucadu Barru. Join Date: Aug 2005 Location: East Yorkshire, England Posts: 2,731 78.50 NP$ (Donate)	Transparency How would I make a table have a semi-transparent background, but one of the cells have a fully opaque background? I know you can do it in ie: Code: <table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);"> <tr> <td style="position: relative;">Woo! Opaque!</td> </tr> <tr> <td>Woo! 50% Opaque!</td> </tr> </table> How would I change that code to work in other browsers? __________________ Website \| Blog \| Uzbl (my branch) 9thSeptember2009.com

10-23-2006, 06:30 AM	#2 (permalink)
andysyme NamePros Member Join Date: Sep 2006 Posts: 132 0.00 NP$ (Donate)	Warning: Very cheap and nasty, but all I could come up with at the moment Code: <table height="200" width="200" border="1" style="filter: alpha (opacity=50);"> <tr> <td bgcolor="#FF0000" style="position: relative;">Woo! Opaque!</td> </tr> <tr> <td bgcolor="#FF0000" style="-moz-opacity:.40;">Woo! 50% Opaque!</td> </tr> </table> I have left your IE handling as is. I use the -moz-opacity for firefox. However, I had to style each cell individually. Have a play and you'll get the idea! There must be a neater way, just haven't found it yet! Andy __________________ Coming soon - POCHost.com

10-23-2006, 06:36 AM	#3 (permalink)
Barrucadu Barru. Join Date: Aug 2005 Location: East Yorkshire, England Posts: 2,731 78.50 NP$ (Donate)	FOUND THE CODE Code: <style> /Transparency/ #one { position: relative; } #two { z-index: 5; position: relative; } #thr { background-color: #FFFFFF; border: 1px solid black; opacity: 0.5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div id="one"> <div id="thr"></div> <div id="two"> Content Goes Here </div></div> Demo: http://www.white-knights-templar.com/phpBB2/index.php The CSS method dosnt work in IE, so i'm going to have to mess around with it until it does... __________________ Website \| Blog \| Uzbl (my branch) 9thSeptember2009.com

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)