Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Transparent table cell

Status
Not open for further replies.
bamboo

bamboo

Programmer
Aug 22, 2001
89
US
I have a one cell table that has a large background image. The cell height/width are set to the image so it will not tile. I then have a one cell table within that cell with a background color with text. I'd like to make the cell bgcolor somewhat transparent so the image behind it shows. Here's the code.

<table width="500" height="400" cellpadding="0" cellspacing="0" border="0">

<tr>
<td background="images/bg_image.gif">

<table width="400" height="250" cellpadding="3" border="0" cellspacing="0">
<tr>

<!---- this is the cell that I need to be transparent --->
<td bgcolor="#667788">
text goes here
</td>

</tr>
</table>

</td>
</tr>

</table>
 
Sort by date Sort by votes

Even if you decided to go down the route of using CSS opacity for the inner cell, your text would also be opaque.

Keith's solution is a good way of avoiding this.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 
Upvote 0 Downvote
Thanks everyone. What is going on is my client had her graphic designer mock up some screen layouts for her website. One thing to mention is he is a 'print' graphic designer and not a web designer. And as you know print graphics and web graphics are different. They have way more flexibility. So his comps that he did in photoshop have a very large image as the background (table background) and then he has a semi-transparent box overlaying part of the image where the text would go. It looks great, but again doing this in photoshop/fireworks and then duplicating this on a web canvas is a little more tricky.

I unfortunately only use css for text control and that's about it so I'm not sure what to do. I may have to suggest to her a different route. How about layers?
 
Upvote 0 Downvote
This would work:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

	<style type="text/css">
		#transBG {
				position: absolute;
				background-color: #667788;
				width: 400px;
				height: 250px;

				opacity: 0.3;														/* CSS-3 Standards */
				filter: alpha(opacity=30);											/* MS Internet Explorer */
				-moz-opacity: 0.3;													/* Mozilla v1.6 and below */
				-khtml-opacity: 0.3													/* Safari / Konqueror */
		}
	</style>
</head>

<body>
	<table width="500" height="400" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td style="background-color:red;">
			<div id="transBG"></div>
			<table width="400" height="250" cellpadding="3" border="0" cellspacing="0">
			<tr>
				<td>text goes here</td>
			</tr>
			</table>
		</td>
	</tr>
	</table>
</body>
</html>

I've used a red background as a replacement for the image just for testing. You should be able to swap it back in.

Of course, this solution has a few drawbacks:

- The solution only works in browsers that support transparency (this will work in IE, FF, NN, Safari, and Konqueror, but NOT Opera)

- If the text in the inner cell grows bigger than the dimensions allow, the transparent effect will not grow to match.

Hope this helps,
Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
 
Upvote 0 Downvote
Great! Thanks Dan, I will try this out this morning when I get a chance.
 
Upvote 0 Downvote
Hi Dan. I tried putting an image in as follows but the transBG doesn't seem to be working. The image displays fine, but the transBG is solid:

<table width="500" height="400" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-image:url(images/butterfly.jpg)">
<div id="transBG"></div>
<table width="400" height="250" cellpadding="3" border="0" cellspacing="0">
<tr>
<td>Hello World</td>
</tr>
</table>
</td>
</tr>
</table>

Is this working for you?
 
Upvote 0 Downvote
This actually works in NS, but not in IE. Interesting because it should since I'm using the filter: alpha(opacity=30).

I'm running Netscape 7 and IE 6.
 
Upvote 0 Downvote
Oh you can use any .gif or .jpg image you have handy. I just threw one in I had in my images folder in my web directory. Sorry for not being more specific.

-Marc
 
Upvote 0 Downvote

It works with no problems. Are you running this from a web sevrer or locally?

If locally, you will need to makae sure you have permission to run ActiveX (the opacity filter is counted as ActiveX).

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 
Upvote 0 Downvote
That was the problem. I was running it locally and didn't have my permissions turned on. Thanks again Dan.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
984
spamjim
spamjim
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
157
vacunita
vacunita
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
191
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
185
PeDa
PeDa
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
197
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top