Opacity

[Paul Wake]

I'm trying to get http://www.xmission.com/~wake/thewillowproject.html to look
better. I've tried changing the opacity back up for the div the text is in,
I've tried different combinations of positioning, I've tried about every thing I
can think of, but in Firefox I can't get it to look largely like it does but
with darker text, and it looks awful in IE, period. Is there anything obvious
I'm missing that I can fix?

[dorayme]

In article <f2**********@news.xmission.com>,
Paul Wake<wa**********@xmission.comwrote:

I'm trying to get http://www.xmission.com/~wake/thewillowproject.html to look
better. I've tried changing the opacity back up for the div the text is in,
I've tried different combinations of positioning, I've tried about every
thing I
can think of, but in Firefox I can't get it to look largely like it does but
with darker text, and it looks awful in IE, period. Is there anything
obvious
I'm missing that I can fix?

I got it to look better by substituting the line

<p><img src="willowlogo.gif" width="100%";></p>

for what you had. The image is too big and over stretches the
div#content. It does not much matter that this pic heading varies
its width and it looks better for it under browser window
changes. That's one thing.

I did not look at what all that script is doing and just cut most
of it out without affecting FF.

I would use in #opaque, opacity: 0.7 or 0.8 rather than 0.5.

But really, you should be checking via validators first and
fixing.

I doubt it is a wise thing to have that red notice for IE! e
specially as it would look fine with a white bg for the content.
Many people would surely even prefer this. It comes up in my iCab
too! So at least the wording needs changing.

I would say you are missing that you will go crazy being too
precious about stuff like opacity. Put it in if it does no harm
and let things look otherwise workmanlike in browsers not so
capable.

--
dorayme

[Beauregard T. Shagnasty]

Paul Wake wrote:

I'm trying to get http://www.xmission.com/~wake/thewillowproject.html
to look better.

I was halfway through reading the first paragraph when that background
image finally popped up (and I am using 10Mbps cable). This is waaaay to
large. Someone on dialup would have finished reading the page and moved
on before it finished loading.

http://www.xmission.com/~wake/willow.jpg
876.6 KB (897,639 bytes)
1,449px × 1,088px

--
-bts
-Motorcycles defy gravity; cars just suck

[Jonathan N. Little]

Beauregard T. Shagnasty wrote:

Paul Wake wrote:

>I'm trying to get http://www.xmission.com/~wake/thewillowproject.html
to look better.

I was halfway through reading the first paragraph when that background
image finally popped up (and I am using 10Mbps cable). This is waaaay to
large. Someone on dialup would have finished reading the page and moved
on before it finished loading.

http://www.xmission.com/~wake/willow.jpg
876.6 KB (897,639 bytes)
1,449px × 1,088px

Wow! I just thought the page had a white background!

Until something fundamentally changes with the network this concept will
remain fine for billboards but not for webpages. There are creative ways
to give the "impression" of large image wallpaper without the monster
image. Anyway as web design goes I think the background is too
overpowering and you cannot read your "message" very well. It is your
"message" that is important, right?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Paul Wake]

The message is tongue-in-cheek, and the main thing I'm doing with that page is
just playing with it to experiment with background images and more particularly
with opacity.

[Jonathan N. Little]

Paul Wake wrote:

The message is tongue-in-cheek, and the main thing I'm doing with that page is
just playing with it to experiment with background images and more particularly
with opacity.

Well in real life it would not be practical.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Paul Wake]

I never did figure out how to bring the text up to full opacity over a more
transparent background (I tried z-index divs, etc. to no avail), but by upping
the opacity the text shows better than it was. The other big problem was with
IE: the "filter: alpha(opacity=75);" wasn't working at all--there was just a
white background. Adding "height: 100%;" to the div fixed that and got opacity
working (although it threw off top and bottom padding in IE, but I figure that
IE users can't be choosy). I understand that some people don't like opacity,
but I'm guessing that opacity is one of the next big things a lot of people
latch onto, if it ever becomes a workable standard.

[Ben C]

On 2007-05-13, Paul Wake <wa**********@xmission.comwrote:

I never did figure out how to bring the text up to full opacity over a more
transparent background (I tried z-index divs, etc. to no avail), but by upping
the opacity the text shows better than it was.

You can do it like this:

1. Remove background-color and opacity from your selector for #opaque.
2. Add to the selector for #opaque "position: relative; z-index: 0"
3. Create a new selector:

#curtain
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
opacity: 0.35;
z-index: -1;
}
I've reduced the opacity to 0.35 to make the effect more obvious.

4. In the content, just after where you open <div id="opaque"add:

<div id="curtain"></div>

This way the semi-opaque "curtain" is inserted behind the text, but the
text is not painted onto the curtain (which would make it 0.35 opacity
together with it), but into its <pwith default transparent background
and fully opaque foreground stacked on top of the curtain.

#opaque (not a good name by the way) is position: relative so it becomes
the containing block for the curtain, which uses top, bottom, left and
right of 0 to locate it inside its containing block.

z-index is necessary because absolutely positioned descendents are
usually stacked above normal flow descendents. Note also that we have to
make #opaque z-index: 0 so that it establishes the stacking context for
#curtain. This means #curtain goes behind other things _within #opaque_.
Otherwise z-index: -1 could put it behind things higher in the document
with the result you might not see it at all.

[Paul Wake]

Thanks! That works better. I'd read elsewhere that it was impossible to do,
but you did it!

[Nik Coughlin]

Paul Wake wrote:

Thanks! That works better. I'd read elsewhere that it was
impossible to do, but you did it!

Doesn't work in IE 6 :(

[Nik Coughlin]

Ben C wrote:

On 2007-05-13, Paul Wake <wa**********@xmission.comwrote:

>I never did figure out how to bring the text up to full opacity over
a more transparent background (I tried z-index divs, etc. to no
avail), but by upping the opacity the text shows better than it was.

You can do it like this:

1. Remove background-color and opacity from your selector for #opaque.
2. Add to the selector for #opaque "position: relative; z-index: 0"
3. Create a new selector:

#curtain
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
opacity: 0.35;
z-index: -1;
}
I've reduced the opacity to 0.35 to make the effect more obvious.

4. In the content, just after where you open <div id="opaque"add:

<div id="curtain"></div>

This way the semi-opaque "curtain" is inserted behind the text, but
the text is not painted onto the curtain (which would make it 0.35
opacity together with it), but into its <pwith default transparent
background and fully opaque foreground stacked on top of the curtain.

#opaque (not a good name by the way) is position: relative so it
becomes the containing block for the curtain, which uses top, bottom,
left and right of 0 to locate it inside its containing block.

z-index is necessary because absolutely positioned descendents are
usually stacked above normal flow descendents. Note also that we have
to make #opaque z-index: 0 so that it establishes the stacking
context for #curtain. This means #curtain goes behind other things
_within #opaque_. Otherwise z-index: -1 could put it behind things
higher in the document with the result you might not see it at all.

Doesn't work in IE6:
http://www.nrkn.com/3ColEqual/test.html

[Paul Wake]

In article <f2**********@aioe.org>, Nik Coughlin says...

>
Paul Wake wrote:

>Thanks! That works better. I'd read elsewhere that it was
impossible to do, but you did it!

Doesn't work in IE 6 :(

Bummer. Does in IE7 (Win), though, mostly.

One other question: is there a good way to center the opaque text area
vertically?

http://www.xmission.com/~wake/thewillowproject.html

[Ben C]

On 2007-05-16, Nik Coughlin <nr******@gmail.comwrote:

Paul Wake wrote:

>Thanks! That works better. I'd read elsewhere that it was
impossible to do, but you did it!

Doesn't work in IE 6 :(

I'm a genius, not a magician.

[Ben C]

On 2007-05-16, Paul Wake <wa**********@xmission.comwrote:

In article <f2**********@aioe.org>, Nik Coughlin says...

>>
Paul Wake wrote:

>>Thanks! That works better. I'd read elsewhere that it was
impossible to do, but you did it!

Doesn't work in IE 6 :(

Bummer. Does in IE7 (Win), though, mostly.

One other question: is there a good way to center the opaque text area
vertically?

http://www.xmission.com/~wake/thewillowproject.html

If you don't mind setting a height on it it's quite easy. Use

position: absolute;
height: 60%;
margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;

on #content

But when the viewport gets small, the text will still overflow its
container.

See http://www.student.oulu.fi/~laurirai/www/css/middle/ for some
alternatives.

But really to do this you need display: table-cell or display:
inline-block, neither of which work properly in IE, and inline-block
also doesn't work in Firefox.