- From: Kris Vanderwater <kris@meridian-ds.com>
- Date: Fri, 09 Sep 2005 14:03:01 -0500
- CC: www-style@w3.org
So Bruno, kinda like this?
http://www.456bereastreet.com/lab/cssframes/
except with the navbar not scrolling either? and taking up the full size
horizontally as well?
Cause if you check the css code on that page, you should be able to set
such a thing up pretty easily.
Kris
Bruno Melloni wrote:
> Yes, this is exactly it.
>
> As to the "NEVER" you are somewhat right, there are some occasions
> where it might exceed the size. We design our pages to be fully
> user-friendly at 800x600 monitor resolution. We also allow for
> flexibility so that the page retains their "basic look and feel" if the
> user shrinks the broswer below that size. The internal scrollbars on
> the DIV will normally handle the shrinking.
>
> But of course... as you approach zero size something will eventually
> fail, since the header, footer and menu do have a minimum size. But
> typically you would not loose the footer until you shrunk so far that
> the space between header and footer went to zero (or close to it).
>
> Bruno Melloni
> Director of Software Architecture
> Akuratus Corporation
> 1333 N. Stemmons Fwy, Suite 110
> Dallas, Texas 75207
> Phone: 469.227.0920
> Fax: 469.227.0967
> bruno.melloni@akuratus.com
> www.akuratus.com
>
>
>>>>Kris Vanderwater <kris@meridian-ds.com> 09/09 11:52 AM >>>
>
>
> Bruno,
>
> Let's look at this again. 100% of the content of the page MUST be
> visible at all times yes?
>
> The footer must ALWAYS show, but can't use frames.
>
> the header and navbar should show also.
>
> The content NEVER exceeds the remaining space? And when it's too small
>
> MUST take up the remaining space?
>
> I can't image it NEVER taking more space then you have, but we can
> address that later.
>
> Is this right?
>
> Kris
>
> Bruno Melloni wrote:
>
>>Hello, I need help in finding a CSS standard-compliant solution.
>
> Desperately.
>
>>We have a web application that *>must<-- be made to fit in the
>
> visible portion of the browser window (without browser scrolling) and
> without frames. There are portions (header, left menu, footer) that are
> fixed sized and are allowed to "collapse" to minimum size. But there
> are portions (the main body and often pieces of it) that need to get
> 100% of the remaining visible space. The footer must always be
> visible.
>
>>As typical J2EE developers that have used CSS for years, with most of
>
> our knowledge coming from simple online tutorials, and online
> references, but having never really studied CSS from front to back we
> used the following "intuitive" approach:
>
>>1) We used nested tables for the layout with CSS' "height: 100%" for
>
> the "chain" of nested items that needed to get 100%.
>
>>2) We used DIVs with "height:100%; overflow: auto" to make sure that
>
> we used all of the space and no more than that, in the situations where
> we needed an internal scrollbar.
>
>>The code worked in IE (we later discovered that it was because we
>
> were running in quirks mode) but not in Firefox/Mozilla or even in IE in
> standards-compliant mode. In standard-compliant mode the application
> will properly expand to use all the space, but will not limit itself to
> the size of the window (as if the DIV overflow wasn't there).
>
>>We have been looking for a standards-compliant solution for a year.
>
> We received many suggestions, but none worked. We arestuck with a
> non-Windows application that will only run as it was intended in a
> Windows browser!!!
>
>>Is there a way to make our approach work?
>>
>>If not, is there an alternative approach to achieve the exact
>
> look-and-feel behavior that we are currently getting with IE?
>
>>I hope someone can help.
>>
>>Bruno
>>
>>*-----------------------------------
>>The following is a sample HTML/CSS that can be used to see the
>
> desired behavior (in IE) and the unwanted behavior (in
> standards-compliant mode, or Mozilla-based browser in default quirk
> mode). The difference is in the bottom of the browser window, and the
> (internal) scrollbar in the right.
>
>><html>
>><HEAD>
>><STYLE type="text/css">
>>BODY {
>> margin: 0;
>> padding: 0;
>> color: #575529;
>> background-color: #CDCD9C;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 9pt;
>> text-decoration: none;
>>}
>>A {
>> /*color: #575529;*/
>> color: #8C4600;
>> text-decoration: none;
>>}
>>A:hover {
>> color: #562429;
>> text-decoration: none;
>>}
>>DIV {
>> width: 100%;
>> height: 100%;
>> overflow: auto;
>> /*
>> position: absolute;
>> max-width: 100%
>> min-height:100%;
>> max-height: 100%
>> top: 0;
>> bottom: 0;
>> */
>>}
>>UL.none {
>> list-style-type: none;
>>}
>>.maxw {
>> width: 100%;
>> max-width: 100%
>>}
>>.maxh {
>> height: 100%;
>> max-height: 100%;
>>}
>>.maxwh {
>> width: 100%;
>> height: 100%;
>> max-width: 100%
>> max-height: 100%
>>}
>>.maxwh_noborder{
>> border: 0;
>> width: 100%;
>> height: 100%;
>> max-width: 100%
>> max-height: 100%
>>}
>>.maxw_noborder{
>> border: 0;
>> width: 100%;
>> max-width: 100%
>>}
>>.maxh_noborder{
>> border: 0;
>> height: 100%;
>> max-width: 100%
>> max-height: 100%
>>}
>>.banner_bg {
>> background-color: #575529;
>>}
>>.menu_top {
>> height: 17;
>> margin-left: 15;
>> color: #575529;
>> background-color: #B6AA5A;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 8pt;
>> text-decoration: none;
>>}
>>.menu_left {
>> color: #575529;
>> background-color: #CDD0B9;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 9pt;
>> text-decoration: none;
>>}
>>.pg_title {
>> font-size: 12pt;
>> font-weight: bold;
>>}
>>.footer_separator {
>> width: 100%;
>> height: 17px;
>> background-color: #B6AA5A;
>>}
>>.footer_text {
>> color: #575529;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 7.5pt;
>> text-decoration: none;
>> margin-top: 2;
>> margin-bottom: 0;
>> text-align: center;
>>}
>></STYLE>
>></HEAD>
>>
>><BODY topmargin="0" leftmargin="0" class="maxwh">
>><TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
>> <TBODY>
>> <TR>
>> <TD class="banner_bg" class="maxw">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR BGCOLOR="#464420"><TD class=maxw> </TD></TR>
>> </TABLE>
>> </TD>
>> </TR>
>> <TR>
>> <TD class="menu_top" width="100%">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR class="menu_top">
>> <TD width="170" nowrap>
>> <A href="http://localhost:8080/tc/TcInit.do"
>
> class="menu_top">
>
>> <B>Teacher Info Center</B>
>> </A>
>> </TD>
>> <TD class="maxw">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR class="menu_top">
>> <TD nowrap class="menu_top">Teacher Best</TD>
>> <TD class="maxw"> </TD>
>> <TD nowrap align="right" style="font-weight:
>
> bold;">
>
>> <A href="http://localhost:8080/tc/"
>
> class="menu_top">Portal</A>
>
>>
>> <A
>
> href="http://localhost:8080/tc/TcLogoffInit.do"
> class="menu_top">Logoff</A>
>
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> <!-- *************** BOTTOM 2 PANELS START HERE **************
>
> -->
>
>> <TR>
>> <TD class="maxwh">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxwh_noborder">
>
>> <TR>
>> <!-- Left panel starts here (irrelevant) -->
>> <TD width="170" class="maxh">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxh_noborder" width="170">
>
>> <TR><TD height="10"
>
> class="menu_left"> </TD></TR>
>
>> <TR>
>> <TD valign="top" class="menu_left" style="height:
>
> 100%; max-height: 100%;" width="170">
>
>> Menu here
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> <!-- *********** BOTTOM-RIGHT PANEL STARTS HERE
>
> ************* -->
>
>> <TD valign="top" class="maxwh">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxwh_noborder" >
>
>> <TR>
>> <TD width="15"> </TD> <!-- left spacing -->
>> <TD class="maxwh"> <!-- MAIN BODY -->
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxwh_noborder">
>
>> <TR><TD> </TD></TR>
>> <TR>
>> <TD>
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR><TD class="pg_title">Title
>
> Here</TD></TR>
>
>> </TABLE>
>> </TD>
>> </TR>
>> <TR>
>> <TD height="10"></TD>
>> </TR>
>> <form name="teacherViewForm" method="POST"
>
> action="/tc/TeacherViewPost.do">
>
>> <TR>
>> <TD class="maxwh">
>> <DIV>
>> <TABLE cellpadding="0" cellspacing="4"
>
> class="pgmaxwh">
>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> </TABLE>
>> </DIV>
>> </TD>
>> </TR>
>> </FORM>
>> </TABLE>
>> </TD>
>> <TD width="15"> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> <TR>
>> <TD valign="top" class="footer_separator"> </TD>
>> </TR>
>> <TR>
>> <TD class="footer_text">© 2003-2005
>> <A href="http://www.akuratus.com"
>
> class="footer_text">Akuratus</A>
>
>> |
>> <A href="#" class="footer_text">Privacy</A>
>> </TD>
>> </TR>
>> </TBODY>
>></TABLE>
>></BODY>
>></html>
>>
>>
>>Bruno Melloni
>>Director of Software Architecture
>>Akuratus Corporation
>>1333 N. Stemmons Fwy, Suite 110
>>Dallas, Texas 75207
>>Phone: 469.227.0920
>>Fax: 469.227.0967
>>bruno.melloni@akuratus.com
>>www.akuratus.com
>>
>
>
>
Received on Friday, 9 September 2005 18:53:17 UTC