Here's a Fun One

I have five boxes on a page. I need for the height to be no larger than one
screen (it's for a kiosk). Here's the general layout:

http://www.holotech.net/layout.gif

The content of box 1 is static. Box 2 can expand, and should shrink boxes 3
and 4 accordingly. Box 5 can expand, and should shrink box 4 accordingly. I
can use overflow: hidden, and JavaScript is OK.

It only needs to work in Safari, so any cross-browser issues don't matter.

Any ideas?

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Carved in mystic runes upon the very living rock, the last words of
Marek Mänd of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little wrote:
Any ideas?

Yes, please learn to write meaningful subject lines.
Your subject line is like a typical spam emails one.

Sorry, good point.

Any ideas about the solution?

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Carved in mystic runes upon the very living rock, the last words of
Brian of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little wrote:
I have five boxes on a page. I need for the height to be no larger
than one screen

And what do you want to happen if the content does not fit in the
height of the user's browser?

overflow: hidden;

(it's for a kiosk).

I'm not sure how that's relevant.

One browser, one screen. Controlled environment. Display only. Self-
refreshing page, no user interaction.

It only needs to work in Safari, so any cross-browser issues don't
matter.

Oh, so it's not for the www?

That's right. It's for a kiosk.

Any ideas?

You might get better help in a more appropriate group.

Where would be more appropriate for discussing CSS?

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Carved in mystic runes upon the very living rock, the last words of Brian
of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little wrote:

Alan Little wrote:

It only needs to work in Safari, so any cross-browser issues
don't matter.

Oh, so it's not for the www?

That's right. It's for a kiosk.

You might get better help in a more appropriate group.

Where would be more appropriate for discussing CSS?

Noting that there's a "www" in the group name, you must have meant to
ask for a more appropriate group for discussing os/browsers, right? Try
a Mac OS or Safari group.

It isn't a Mac OS or Safari question. It's a CSS question. If you
actually have some insight into a solution, you can pretend it's whatever
browser/OS you want. And you can even pretend it's going to be displayed
on the web. In fact, despite the fact that it will only be used on the
kiosk display, it *will* be on a web server, with an actual live URL, so
somebody *could* look it up on the web. Does that help?

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Alan Little wrote;

Carved in mystic runes upon the very living rock, the last words of Brian
of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little wrote:

Alan Little wrote:

It only needs to work in Safari, so any cross-browser issues
don't matter.
It isn't a Mac OS or Safari question. It's a CSS question.

Yes. And I decided not to try answer it as I have no idea of Safari.

OK.

#c3 {position:absolute;width:50%;bottom:0}
#c4 {margin-left:50%;}
#c5 {position:absolute;width:50%;right:0;bottom:0;}

Works by CSS2, some versions of opera (early 7 or even 6) will get it.
For CSS21 stuff, can't think anything quick.

And you can even pretend it's going to be displayed
on the web. In fact, despite the fact that it will only be used on the
kiosk display, it *will* be on a web server, with an actual live URL, so
somebody *could* look it up on the web. Does that help?

What is your content? Will it overflow some box/which? This is important
information on how to make this.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Carved in mystic runes upon the very living rock, the last words of
Lauri Raittila of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little wrote;

It only needs to work in Safari, so any cross-browser issues
don't matter.

It isn't a Mac OS or Safari question. It's a CSS question.

Yes. And I decided not to try answer it as I have no idea of Safari.

OK, please ignore the Safari bit. Anything that can get me on the right
track is helpful. If I can't get it to work in Safari, I'll get the
client to switch the browser in the kiosk. Any one-browser solution is
fine.

#c3 {position:absolute;width:50%;bottom:0}
#c4 {margin-left:50%;}
#c5 {position:absolute;width:50%;right:0;bottom:0;}

Works by CSS2, some versions of opera (early 7 or even 6) will get it.

Thanks, but that's not getting it.

What is your content? Will it overflow some box/which? This is
important information on how to make this.

It's kind of a tricky layout. I have a wrapper set at 100% height and
width, and that works well. I need to constrain everything inside it to
those dimensions. Box 1 is static content, no problem. The tricky part is
that 2 should expand downward according to its content; 5 should expand
upward according to its content, and 3 and 4 should expand and contract
according to 2 and 5. The contents of 3 and 4 should be cut off if they
overflow. I've fiddled with a bunch of different ideas, but can't get
anything to work.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Alan Little wrote;

Carved in mystic runes upon the very living rock, the last words of
Lauri Raittila of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little wrote;

It only needs to work in Safari, so any cross-browser issues
don't matter.

It isn't a Mac OS or Safari question. It's a CSS question.

Yes. And I decided not to try answer it as I have no idea of Safari.

OK, please ignore the Safari bit. Anything that can get me on the right
track is helpful. If I can't get it to work in Safari, I'll get the
client to switch the browser in the kiosk. Any one-browser solution is
fine.

What is your content? Will it overflow some box/which? This is
important information on how to make this.

The contents of 3 and 4 should be cut off if they overflow.

So, you don't need those boxes to be that size. This makes everything
easy. Do you need exactly same borsers as in you image, or something
different?

The idea is that those boxes doesn't need to be that size, but look like
if they were. Float 3 to left, and make wrapper overflow hidden. Position
box 5 absolutely. Then make the borders, you might need some extra
elements for that.

Try it, and give url if you don't get any further. Should be possible to
make it work IE5 and better.


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Carved in mystic runes upon the very living rock, the last words of
Lauri Raittila of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little wrote;
Carved in mystic runes upon the very living rock, the last words of
Lauri Raittila of comp.infosystems.www.authoring.stylesheets make
plain:

Alan Little wrote;

It only needs to work in Safari, so any cross-browser issues
don't matter.

It isn't a Mac OS or Safari question. It's a CSS question.

Yes. And I decided not to try answer it as I have no idea of
Safari.

OK, please ignore the Safari bit. Anything that can get me on the
right track is helpful. If I can't get it to work in Safari, I'll get
the client to switch the browser in the kiosk. Any one-browser
solution is fine.

What is your content? Will it overflow some box/which? This is
important information on how to make this.

The contents of 3 and 4 should be cut off if they overflow.

So, you don't need those boxes to be that size. This makes everything
easy. Do you need exactly same borsers as in you image, or something
different?

The idea is that those boxes doesn't need to be that size, but look
like if they were. Float 3 to left, and make wrapper overflow hidden.
Position box 5 absolutely. Then make the borders, you might need some
extra elements for that.

Try it, and give url if you don't get any further. Should be possible
to make it work IE5 and better.

Thank you very much for your help. I haven't had a chance to try this
yet, but I will do so as soon as possible. While I was waiting for an
answer, I experimented with a different layout, moving box 5 up under box
2, which allowed me to put 3 and 4 in a table (yes, cheating, I know
The client decided he liked that layout even better than the one he
specified, so that's what we went with. I'd still like to get the other
one to work, though, so I'll try it when I get a chance, and let you know
how it goes.

Thanks again!

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/