Div Layers Tutorial Wanted

Postby **Fsiphskilm** » Thu Jul 14, 2005 5:13 pm

For the l

Postby **Kireihana** » Thu Jul 14, 2005 7:55 pm

Does Mozilla support transparent DIVs? As far as I know it doesn't support transparent iframes, so maybe it's the same. Using a background image definitely seems like it would be easier and more compatible with multiple browsers...

I used the transparent DIV technique in a layout a long time ago but I really can't remember it. Did you try looking at that site's source? That's what I did originally to figure it out.

Postby **Retten** » Thu Jul 14, 2005 10:30 pm

Not sure if this is what your are looking for or not but it is in CSS maybe give it a try.

"How do you create those cool semi-transparent boxes?
Easy, you can do this by inserting these attributes in your element:

filter:alpha(opacity=90); /* IE opacity */
-moz-opacity:0.90; /* mozilla opacity */
opacity: 0.90; /* other browser opacity if available */

The values determine the transparencies. The lower the value the higher the transparencies."

To Write Love on Her Arms · Postby **ZiP** » Fri Jul 15, 2005 12:57 pm

[quote="WhiteBlaze"]Not sure if this is what your are looking for or not but it is in CSS maybe give it a try.

"How do you create those cool semi-transparent boxes?
Easy, you can do this by inserting these attributes in your element:

filter:alpha(opacity=90)]

Can I see some code with that in it? I must be doing this wrong, cause I get no effect in FF, and IE doesn't even load the page.

Postby **Kireihana** » Fri Jul 15, 2005 4:48 pm

ZiP wrote:Can I see some code with that in it? I must be doing this wrong, cause I get no effect in FF, and IE doesn't even load the page.

Make sure your firewall isn't blocking ActiveX scripts... when mine does, it has that pop-down bar that tells me and gives me the option of allowing the scripts. I use that MozOpacity filter on image links all the time and I.E. does this to me.

Postby **Fsiphskilm** » Sat Jul 16, 2005 8:25 am

I don't ha

Postby **Cap'n Nick** » Sat Jul 16, 2005 9:01 am

I've been curious about this too so I poked around a bit and tried some code. It looks like setting opacity, -moz-opacity, and filter: alpha works fairly well. I did that and got working transparency in IE and FF. Note, though that the page did not display properly in Internet Explorer until I enabled ActiveX, which it prompted me to do when I loaded the page.

Here's the source code for the page:

Code: Select all: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Transparency Experiment</title> <style type="text/css"> #top_box { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red; /* Fill out all three of these values for transparency. */ filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; } #middle_box { position: absolute; top: 75px; left: 75px; width: 100px; height: 100px; background-color: blue; /* Fill out all three of these values for transparency. */ filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; } #bottom_box { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: green; /* Fill out all three of these values for transparency. */ filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; } </style> </head> <body> <div id="top_box"></div> <div id="middle_box"></div> <div id="bottom_box"></div> </body> </html>

Postby **Fsiphskilm** » Sun Jul 17, 2005 6:12 pm

I just co

Postby **Cap'n Nick** » Sun Jul 17, 2005 7:50 pm

Success!!!

Postby **Fsiphskilm** » Mon Jul 18, 2005 9:04 am

Postby **shooraijin** » Mon Jul 18, 2005 9:26 am

It seems to reload all the time. Is that normal?

Postby **Cap'n Nick** » Mon Jul 18, 2005 9:52 am

Dude, I dig the stretchy background. They need to make it where you don't need to do funky DIV stuff to do that but this is a pretty clear workaround for the time being. But the refreshing, yeah, that's a bit odd.

This is the line that's causing the page to refresh:

<meta http-equiv="refresh" content="2">

It's telling the page to reload itself every two seconds. Is there a reason this page needs to do that? Anyway, if you want it to stop just delete that and it'll be fine.

Postby **shooraijin** » Mon Jul 18, 2005 9:57 am

I noticed that too. I'm not sure if Volt means to do that on purpose.

Postby **Retten** » Mon Jul 18, 2005 5:19 pm

Oh wow nice job Cap'n Crack you got it down and hey Volt your page looks pretty sweet but it does have a funky refresh rate xD

Postby **Sammy Boy** » Tue Aug 09, 2005 3:29 am

Hi guys,

I got a question about the code back there on page 1. Would it also work if instead of calling them #top_box, #middle_box, etc. you just whacked all that style stuff into a style class (say, ".semitransparentBox") and then called it later in the page?

What i mean is..

<style... >
.semitransparentBox
{ .. all that style stuff goes here ... }
</style>

...

<body> ...
<div id="top" class="semitransparentBox">
some content..
</div>

<div id="middle" class="semitransparentBox">
some content..
</div>

<div id="bottom" class="semitransparentBox">
some content..
</div>

....
</html>

Apart from this, two sites I used to check out often are:

http://www.htmlgoodies.com

and

http://www.w3schools.com

However, I am simply having too much fun pressing the CTRL+C and CTRL+V key combos everyday at work now, so haven't done that anymore.

Cheers.

Postby **Cap'n Nick** » Tue Aug 09, 2005 8:41 am

That looks quite useful if you need to set a number of things to the same level of transparency.

Postby **Fsiphskilm** » Thu Aug 11, 2005 12:52 pm

I can't

Postby **Cap'n Nick** » Thu Aug 11, 2005 4:34 pm

Oh hey, that's pretty smooth. *notes*

Div Layers Tutorial Wanted

Div Layers Tutorial Wanted

Who is online

Loading