Transparency

Barrucadu · 10-23-2006, 07: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, 07: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!
????: NamePros.com http://www.namepros.com/programming/250059-transparency.html

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

Andy

Barrucadu · 10-23-2006, 07: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...

BeZazz · 10-23-2006, 07: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.
????: NamePros.com http://www.namepros.com/showthread.php?t=250059

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, 07: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, 07:08 AM	THREAD STARTER #1 (permalink)
Barrucadu Senior Member Join Date: Aug 2005 Location: East Yorkshire, England Posts: 2,689 Follow @barrucadu	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 Arch Hurd developer; GNU Webmaster; FSF member #8385

10-23-2006, 07:30 AM	#2 (permalink)
andysyme NamePros Member Join Date: Sep 2006 Posts: 134	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! ????: NamePros.com http://www.namepros.com/programming/250059-transparency.html There must be a neater way, just haven't found it yet! Andy

10-23-2006, 07:36 AM	THREAD STARTER #3 (permalink)
Barrucadu Senior Member Join Date: Aug 2005 Location: East Yorkshire, England Posts: 2,689 Follow @barrucadu	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 Arch Hurd developer; GNU Webmaster; FSF member #8385

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