[bagby]

I'm dealing with what I think is the same problem. Basically I want to have a fully opaque DHTML popup on top of a partially transparent page. I have seen this done on other sites and I'm having trouble recreating it.

I have a solution that works in FF but not IE. I think I have narrowed down the problem, which I will describe below. I'm using a combination of CSS and JS DOM.

So, I have a link:

<a href="#" onclick="myPop(params);return false;">Send message</a>

and the JS:

function myPop(params) {
// build my DHTML popup using DOM
var popup = document.createElement("div");
...
// add element to document, outside main table
document.body.insertBefore(popup,document.body.firstChild);
// make main table of page partially transparent
var maintable = document.getElementById("maintable");
maintable.style.filter = "alpha(opacity=40)"; // IE
maintable.style.opacity = "0.4"; // FF & other CSS3 browsers
// set popup properties, would normally do this via regular CSS
popup.style.position = "absolute";
popup.style.margin = "300px auto";
// etc
}

This works great - in Firefox. The issue (I think) is that IE has problem with the absolute positioning. If the position is static, it shows up in IE at the top of the page, where you would expect it, but it really isn't a DHTML popup, which is what I want.

That's as close as I've gotten. Anyone else wanna take a crack at it?

[dan66]

The solution!

http://www.mandarindesign.com/troops...backgroundhard

Basically, the key is creating one div for the background and one separate div for the content (not contained in the background div), and then positioning them in the same place.

[Tact]

i found that link once too but i didn't understand how it worked. it just told you it does, and to copy and paste it.

what has me confused is why -225? what does the minus do? send it beyond the viewing window on top? and then the position relative brings it back down?

that is pretty neat. i notice this person has another method somewhere else on the page but i don't get that one either.

[dan66]

If it didn't have the -225, then the text would be directly below the image. The code is telling it to position itself 225 pixels higher than where it would normally go - which places it directly on top of the image. In some cases it might be easier to use absolute positioning - position the image and the text at the same spot on the page, and as long as the text div is defined outside of the image div, it won't inherit the opacity properties.

[Tact]

oh ok. now i get it. wow. it seems so simple. O_o i can't believe it took this long to figure out. X_X

[ActuallyLaughing]

It took you so long to do something simple; what is above is not the answer!

Note: The Following only works if you have access to background image!
For Background Colours
1:Create A New Image (5x5) in Photoshop or Paint Shop Pro or The Gimp etc. (Not MSPaint)
2:Fill it with the colour you want
3:Set the layer or fill to the opacity you want
4:Save the image and upload it
5:Instead of

background-color: #000000;

It would be

background-image: url(http://www.domain.com/images/mybg.gif);

For Background Images
1:Backup the original image if you want to use it as opaque later
2:Open it in Photoshop or wateva
3:Set the Opacity to wateva you want
4:Save the image and upload it
5:It would be

background-image: url(http://www.domain.com/images/mybgimage.gif);

Simple as that

Works in ALL browsers

[Tact]

whhaattt?? O_o

are you litterally suggesting lowering the opacity in photoshop/gimp and saving it with the lowered opacity? and you think this will solve it? uh...i think you're mistaken. this only works if you save it as png. and even then, ie 6 doen'st support it.

as a gif, you'll just get something ugly.


this wouldnt' work for a solid color OR a real image.



the idea is to creat a semi transparent bg (image) using css, so that whatever is behind can still show through, and yet still have opaque text. if you were to put the text isnide the same div where you applied the transparency...you can't achieve this. which is why it was so difficult to solve.

the final solution actually is pretty clever in that the text is in a seperate from the affected div and you position the text OVER the semi-transparent area. it's not bad. and i could live with using that. so i'm happy with that "solution" as posted by dan.



and fyi. the faded bg idea you're suggesting was a workaround i ended up using and posted like years before in the previous page. i gave up on trying to achive this via css, and did exactly as you said. i had to save the image to make it LOOK like it was showing through the stuff from behind. but unless you have background-attachement fixed, this is NOT going to help at all.



so um...yah. O_o

[MMJ]

Originally Posted by Tact

so um...yah. O_o

haha, your posts always crack me up.

[Tact]

Originally Posted by MMJ

haha, your posts always crack me up.

haha. originally i had "so consider yourself owned, noob". but i was too chicken to leave it on cause the rules here are stricter than your average run of the mill community forum and i definately don't wanna break them cause i like and respect this place too much. (and namecalling is category III offense! O_o)

i still did find it rather insulting though that he made an account with that username, and a reply with that title, as if to say we were all too dumb to figure this out. it's been a challenge for a reason. and he was of no real help whatesoever. that's why i wanted to say that. but i held it in and just put "so um...yah" instead.

[MMJ]

haha, yeah ok.

[woahdae]

This occurred to me, but maybe not to other users of this site, so I thought I would point it out. When you use relative positioning of the text, the space it used to take up is still there. This isn't apparent in the solution mentioned above because he doesn't have much text and extra spacing below the image doesn't matter.

http://www.mandarindesign.com/troops...backgroundhard

although dan66 is exactly right, positioning 2 divs in the same spot is the trick. In my opinion, a better way to do it would be to make the transparent div positioned absolutely inside a container with... well, I don't know what the technical term for it is - Whatever property that's set when a div has either relative or absolute positioning set on it. When this is the case, all absolutely positioned elements will be relative to the boundaries of its container. Thus, give some element relative positioning, then use the two div trick inside it. the semi-transparent div with absolute positioning will be layered relative to the corners of this container, but completely outside of the normal text flow. Thus, the second div will automatically display over the semi-transparent div because the semi-trans div is not a part of normal text flow.

There's one thing I can't figure out though. For this to work, the text div has to have relative positioning applied to it, but doesn't need any positioning modifications. Otherwise, the text will be much darker than it would have been without the trick, but will get just a little opacity from the background (in FF at least). Seems odd to me, but there's obviously something I don't understand about that property for which I don't know the name of that is applied when an element is given relative or absolute positioning.

With this approach, I was able to implement a semi-transparent table-based calendar showing through to a background image. Very pretty, and should be cross-browser. Thanks for the head start, all.

Here's an excerpt of my CSS that applies to the effect I'm describing:

td {
	width: 100px;
	height: 100px;
	vertical-align:top;
}

.transparent_background {
	width: 100px;
	height: 100px;
	position: absolute;
	background-color: green;
	opacity:.5;
	filter:alpha(opacity=50);
}

.text {
	position:relative;
}

After I came up with this, I found a forum with a similar solution, although it wasn't clear what was necessary and why it wouldn't work in opera. from http://www.ahfb2000.com/webmaster_he...ead.php?t=3318

<html>
<head>
<title>Transparent div</title>
<style type="text/css">
<!--
body {
     background:url(http://hstrial-dbayly.homestead.com/files/dog.jpg) no-repeat top left;
     margin:0;        
 }
#one {
       background:#ff0000;
     width:200px;
     height:216px;
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
     -moz-opacity:0.20; 
     position:absolute;
     top:0;
     left:0;
 }
#two {
     width:200px;
     height:216px;
     position:absolute;
     top:0;
     left:0;
     font-family:arial;
     font-size:18px;
     color:#ffffff;
     padding:20px;
 }
//-->
</style>

</head>
<body>

<div id="one"></div>
<div id="two">
The text has to go in a separate div to the transparent  div. 
This effect will not work in Opera browsers.
</div>

</body>
</html>

I'd be interested to know in what ways people are using this solution, and in what situations it fails (and why). Thoughts?

[gothiqueautumn]

Seem's that this is the thread that will never die...

I actually have two issues so I'll go ahead and throw in the second non-related one just in case someone has a solution for that as well.

I'm creating a liquid layout with three coloumns and a header.

Issue #1 I want to use the CSS rounded corners technique on the columns and header but I can't seem to figure out how to incorporate the layout with the rounded corners CSS and DIV's

Issue #2 (On the topic) I want the rounded corner technique to have transparency on the box but not the contents of the box. I've tried for hours and can't seem to figure this one out either. I tried photoshopping the 4 (and one time a fifth image based on using someone elses rounded corner technique) corner images with opacity and then putting it all together but this is the result I got. -> electrodollie.com/roundtest.htm

I suppose I could always just make an entire block image with rounded corners and opaque the whole thing but that requires me to make an individual image for each part which, and each time the content needs to be reduced or expanded. Or opaque and image and place a DIV with transparency over it and set it scroll on overflow but I detest haveing a page with any portion of it scrolling.

Can anyone help me with either of my issues I have here?

Thanks

[Tact]

i've done rounded corner things before too. but i used tables. (i did it way back when using tables for layout was totally ok )

i can't imagine how to pull it off with css/divs much less opacity as well. O_o

you could always just make the top and bottom images. so you have two pieces and not just one. and it should be able to stretch to whatever content is inside if you code it right. i'm thinking something like this..

[box wrapper]
{rounded corners top}
content that stretches
to whatever lenght.
{rounded corners bottom}
[box wrapper]

something like that. in total it might end up having 3-4 divs total to pull it off. is that ok? i'm still learning css div's myself and not sure if theres a more streamlin/effecient way to do certain things.


that would just take care of the roundedness though. (if i understood you correctly)

as for transparency... maybe the solutions provided here could worth with it?

[gothiqueautumn]

Actually I ended up finding a solution I was just searching with the wrong keywords. This is what I found

http://www.schillmania.com/projects/dialog2/

[striker0204]

i know myspace is myspace, but it uses cSS and you can make transparent backgrounds using CSS in myspace. so it is possible.