[tomdkat]

Great! Of course, you'll need to tweak it to get it exactly as you need but that shouldn't be too difficult.

Just be sure to adjust the opacity setting for BOTH the "opacity" and "filter: opacity" attributes so all browsers apply the same amount.

Good luck!

Peace...

[mellojoe]

Howdy, folks. A quick greeting from Arkansas.

Just wanted to say a huge 'THANK YOU' to everyone in this 634-year-old thread. I was trying out some different concepts for transparent DIV's and I couldn't seem to get them perfect.

The trick of having two separate DIV's that were positioned on top of each other works good for me.

I can't believe how much around-and-around I went looking for this simple solution.

THANK YOU!

[citizensheep]

In case it's relevant/useful, this post explains how I produced opaque text on a transparent background using two identical divs. It requires duplicate content and the transparency doesn't work in IE6, but it may be of interest.

Regards, Michael

[tomdkat]

Originally Posted by citizensheep

It requires duplicate content and the transparency doesn't work in IE6, but it may be of interest.

Would the opacity "filter" I commented on in post #59 on the previous page of this thread work in your method?

Peace...

[citizensheep]

Originally Posted by tomdkat

Would the opacity "filter" I commented on in post #59 on the previous page of this thread work in your method?

It probably would; I tend to avoid worrying about quirks mode if I can, but your solution certainly seems much cleaner.

Best wishes,

Michael

[cutcopypaste]

this thread is probably a bit of a treasure trove, though I'm a bit too dense to make sense of all of it heh..
I'm trying to achieve a similar effect in a wordpress theme using stylesheets (at www.radioslipstream.com/wp/ .. I have a 50% black 50% transparent image overlay right now which looks bad on many monitors) but I don't know how to work with divs etc would I have to do that in the php files themselves?

[tomdkat]

What is the actual effect you're looking for? Maybe you should start a thread in the web development forum on this and we can look into this there. If you could post a mockup of what you have in mind, that would help.

Peace...

[nico1et]

first, i don't work with styles & all that stuff.. in fact, i'm usually just copying & editing stuff, & i don't have the time nor the patience to try to learn stuff that i'll barely if ever use.

i saw you answering the person who wanted almost the same thing i'm trying to do (although the page is set up quite differently). i'm working on a test page but i've looked everywhere & tried everything...with no luck.

i don't get all the styles stuff...i already have some styles stuff (to make the background fixed while the rest scrolls) on the top, so i have zero clue how you go about adding to that. in other words, i don't get it & my brain (& eyes) hurt too much to look at much info.

i've just been playing around on a test page, but you can probably see what i'm trying to do on this page (unless it's changed by the time you see this). it's got a fixed background, & a table that input shows up on over on the right there. currently it's got a black background. i don't like the blocky way it looks at all, & i'm trying to make the black somewhat transparent so that i can see the bg image thru it (but still be able to read the text well enough). i'm not set on colors yet...

could you possibly take a look at the coding that's in there & try to help me with a way to (easily) do this w/o me having to think too much about it? i mean it when i tell you that i'm stuck in the old html ways & i feel there should be a simpler way to do this, like "transparency=50%"... it's annoying that things aren't simple anymore. plus i need this (obviously) to work in firefox and IE, cuz some people still use that old one (IE).

here's the test page...saucer. i would be forever grateful if you could make this easy as possible on me..

thanks a bunch.

[tomdkat]

nico1et,

Could you start a new thread for your assistance request in the web development forum here?

Thanks!

Peace...

[nico1et]

what can you expect for a newbie anyway?!

[imergeandsee]

I am trying to do the same thing as TAC T, and thus far I get everything FADING or Semi Transparent but I cant get the text to behave how i want in the iframe

Below is the html i have that does not work or go to this link:
http://www.imergeandsee.com/1819/181...cialrules.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reggae Gold 2008 Contest Rules</title>
<style type="text/css">
<!--
A:active{color:E9A63B;font-weight:none;font-family:"Arial";text-decoration:none;font-size:13;filter:alpha (opacity=100);}

body {
margin-left: 0px;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ceb69a;
}
text {
color:000000;
font-weight: none;
font-family:"Arial";
text-decoration: none;
font-size:13;
filter: alpha (opacity=100);
}
">

-->
</style></head>

<body style="filter: alpha (opacity=50)">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#CEB69A" >
<tr>
<td width="873" height="1000" align="center" valign="top">

<table width="750" height="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="http://www.imergeandsee.com/1819/1819_sitebg.gif" style=:"filter>
<tr>
<td align="center" valign="top" ><br />
<iframe src="http://www.imergeandsee.com/1819/1819reggaegold08officialrules.html" style="filter: alpha (opacity=100)" vspace="10" width="700" height="500" allowtransparency="true">If you can see this, your browser doesn't
understand IFRAME. However, we'll still <a href="http://www.imergeandsee.com/1819/1819reggaegold08officialrules.html">link (click here)</a> you to the file. </iframe></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

[tomdkat]

Originally Posted by imergeandsee

I am trying to do the same thing as TAC T, and thus far I get everything FADING or Semi Transparent but I cant get the text to behave how i want in the iframe

Below is the html i have that does not work or go to this link:

I'm confused as well. How is the text misbehaving? It's loading just fine in the iframe for me. What's the problem?

EDIT: Also, could you start a new thread for this issue (if you haven't already) in the web design forum? Thanks!

Peace...

[Ragtube]

Originally Posted by tomdkat

Ok, this isn't perfect but it should get you in the right direction:

Here is the CSS styling:

  <style type="text/css">
.style1 {
  font-size: 36px;
  font-style: italic;
  font-weight: bold;
}
 
#table1 {
  z-index: 5;
  position: relative;
  margin-top: -2128px;
}
 
#lightgrey {
  display: block;
  width: 100%;
  height: 2128px;
}
 
#background {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.60;
 
  /* To get opacity working in IE:  http://www.quirksmode.org/css/opacity.html */
  filter: alpha(opacity=60);
}
 
#lightgrey textarea, input {
  background-color: transparent;
}
  </style>

The "style1" class was already in your HTML file. The other ids I added.

Here are the HTML changes I made:

  
<div id="lightgrey">
 <img src="lightgrey.jpg" id="background" />
  <table id="table1" border="1" cellpadding="0"  cellspacing="0" width="100%">

  </table>
  </div>

Adjust the opacity of the #background id to adjust the table background image.

That's it!

EDIT: I found how to get the opacity working in IE and updated the CSS above.

Peace...

I really need help... How do I apply these changes to my entire "member's area" on my website with (http://i535.photobucket.com/albums/e...be/RagTube.gif) as the picture. I have attached a copy of my members htm...Ragtube.com

[tomdkat]

Please start a new thread in the web development forum, if you haven't already.

Peace...