Page 1 of 1
Div Layers Tutorial Wanted
PostPosted: Thu Jul 14, 2005 5:13 pm
by Fsiphskilm
For the l
PostPosted: Thu Jul 14, 2005 7:55 pm
by Kireihana
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.
PostPosted: Thu Jul 14, 2005 10:30 pm
by Retten
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."
PostPosted: Fri Jul 15, 2005 12:57 pm
by ZiP
[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.
PostPosted: Fri Jul 15, 2005 4:48 pm
by Kireihana
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.
PostPosted: Sat Jul 16, 2005 8:25 am
by Fsiphskilm
I don't ha
PostPosted: Sat Jul 16, 2005 9:01 am
by Cap'n Nick
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>
PostPosted: Sun Jul 17, 2005 6:12 pm
by Fsiphskilm
I just co
PostPosted: Sun Jul 17, 2005 7:50 pm
by Cap'n Nick
Success!!!
PostPosted: Mon Jul 18, 2005 9:04 am
by Fsiphskilm
WOW
PostPosted: Mon Jul 18, 2005 9:26 am
by shooraijin
It seems to reload all the time. Is that normal?
PostPosted: Mon Jul 18, 2005 9:52 am
by Cap'n Nick
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.
PostPosted: Mon Jul 18, 2005 9:57 am
by shooraijin
I noticed that too. I'm not sure if Volt means to do that on purpose.
PostPosted: Mon Jul 18, 2005 5:19 pm
by Retten
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
PostPosted: Tue Aug 09, 2005 3:29 am
by Sammy Boy
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.
PostPosted: Tue Aug 09, 2005 8:41 am
by Cap'n Nick
That looks quite useful if you need to set a number of things to the same level of transparency.
PostPosted: Thu Aug 11, 2005 12:52 pm
by Fsiphskilm
I can't
PostPosted: Thu Aug 11, 2005 4:34 pm
by Cap'n Nick
Oh hey, that's pretty smooth. *notes*
