CHI-WEB Archives

ACM SIGCHI WWW Human Factors (Open Discussion)


Options: Use Forum View

Use Monospaced Font
Show Text Part by Default
Show All Mail Headers

Message: [<< First] [< Prev] [Next >] [Last >>]
Topic: [<< First] [< Prev] [Next >] [Last >>]
Author: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Richard Chimera <[log in to unmask]>
Reply To:
Richard Chimera <[log in to unmask]>
Thu, 11 May 2000 12:43:10 -0700
text/plain (252 lines)
> Date:    Wed, 10 May 2000 10:28:38 -0700
> From:    Ross Olson <[log in to unmask]>
> Subject: Re: webapp: persistent navigation
> "Kathy E. Gill" wrote:
> > >Richard Chimera wrote:
> > >> From:    Mary Deaton <[log in to unmask]>
> > >> I have been asked by program management to design
> > >> a means of having the navigation links for a web
> > >> application persist
> >
> > >We use the HTML tag "DIV" to establish a region on the
> page that scrolls
> > >independently of the rest of the page.  (We also turn off
> scrolling for the
> > >BODY tag so that the whole page itself does not draw a
> scroll bar and thus
> >
> > Is this CSS spec? And is it currently supported in anything
> other than MSIE?
> No, Richard may not have a full understanding about DIV tags,
> or at least how
> they are used at
> The DIV tag does not have scrollable areas. On there
> are frames that
> have scroll bars turned off and on. To my knowledge without
> some significant
> DHTML tricks, only frames and iframes can have scrollable
> areas (or need them
> to be turned off).
> ...Ross...

Woah, nellie!  First of all, I did not say that it is that is
the implementation of which I state we use the DIV tag.  As it turns out I
have nothing to do with our corporate web site, I am working on
intranet/extranet web applications that we sell to our clients.

Secondly, as was pointed out via a couple private replies I received, I
should have been more explicit as to which specs I am referring and which
browser versions I am testing.  I am in the enviable position of only having
to support MSIE 5, which itself supports HTML 4.0 and CSS2 (to a large

Having explained that, the DIV tag does support scrolling via the use of the
STYLE attribute that has expanded capabilities in the CSS2 (two)
specification -- the OVERFLOW property.  According to the book "The Complete
Reference HTML Second Edition" by Thomas A. Powell, only MSIE 5 supports the
OVERFLOW property.  However, I think Netscape Navigator 4.5 did do the right
thing on a visitor's laptop.

The code snippet below implements a non-scrolling page with reserved areas
for particular actions and a scrolling work area via the DIV tag.  Believe
me, I am not saying that this is excellent HTML code, just a quick example I
threw together to demonstrate the idea.

<TITLE>Scrolling DIV Example</TITLE>
<BODY scroll="no" topmargin="0" leftmargin="0" rightmargin="0"
bottommargin="0" >

<table id='Banner' width='800px' height='100px' align='center' border='8'>
    <td width='100%' align='center'>
        Reserved Area 1, a banner probably
<table width='800px' height='500'px'>
    <td width='160px' valign='top' style="border-right: 1px solid">
        Reserved Area 2, a permanent navigation area probably<br><br>
        Module 1<br>
        Module 2<br>
        Module 3<br>
        Module 4<br>
        Module 5<br>
        Module 6<br>
        Module 7<br>
    <td width='640px' valign='top'>
      <table id='TableHeaderWhichDoesNotScroll' width='624px'
             border='1' cellspacing='0' cellpadding='0'>
        <tr align='center'>
          <td width="25%">
            Row Number
          <td width="25%">
            Column 1
          <td width="25%">
            Column 2
          <td width="25%">
            Column 3
      <div id='TableDivWhichScrolls' valign="top" width="100%"
           style="HEIGHT: 300px; OVERFLOW: scroll;">
        <table id='TableData' width="100%" border='0' cellspacing='0'
          <tr align='center'>
            <td width='25%'>Row 1</td>
            <td width='25%'>Cell 1,1</td>
            <td width='25%'>Cell 1,2</td>
            <td width='25%'>Cell 1,3</td>
          <tr align='center'>
            <td>Row 2</td>
            <td>Cell 2,1</td>
            <td>Cell 2,2</td>
            <td>Cell 2,3</td>
          <tr align='center'>
            <td>Row 3</td>
            <td>Cell 3,1</td>
            <td>Cell 3,2</td>
            <td>Cell 3,3</td>
          <tr align='center'>
            <td>Row 4</td>
            <td>Cell 4,1</td>
            <td>Cell 4,2</td>
            <td>Cell 4,3</td>
          <tr align='center'>
            <td>Row 5</td>
            <td>Cell 5,1</td>
            <td>Cell 5,2</td>
            <td>Cell 5,3</td>
          <tr align='center'>
            <td>Row 6</td>
            <td>Cell 6,1</td>
            <td>Cell 6,2</td>
            <td>Cell 6,3</td>
          <tr align='center'>
            <td>Row 7</td>
            <td>Cell 7,1</td>
            <td>Cell 7,2</td>
            <td>Cell 7,3</td>
          <tr align='center'>
            <td>Row 8</td>
            <td>Cell 8,1</td>
            <td>Cell 8,2</td>
            <td>Cell 8,3</td>
          <tr align='center'>
            <td>Row 9</td>
            <td>Cell 9,1</td>
            <td>Cell 9,2</td>
            <td>Cell 9,3</td>
          <tr align='center'>
            <td>Row 10</td>
            <td>Cell 10,1</td>
            <td>Cell 10,2</td>
            <td>Cell 10,3</td>
          <tr align='center'>
            <td>Row 11</td>
            <td>Cell 11,1</td>
            <td>Cell 11,2</td>
            <td>Cell 11,3</td>
          <tr align='center'>
            <td>Row 12</td>
            <td>Cell 12,1</td>
            <td>Cell 12,2</td>
            <td>Cell 12,3</td>
          <tr align='center'>
            <td>Row 13</td>
            <td>Cell 13,1</td>
            <td>Cell 13,2</td>
            <td>Cell 13,3</td>
          <tr align='center'>
            <td>Row 14</td>
            <td>Cell 14,1</td>
            <td>Cell 14,2</td>
            <td>Cell 14,3</td>
          <tr align='center'>
            <td>Row 15</td>
            <td>Cell 15,1</td>
            <td>Cell 15,2</td>
            <td>Cell 15,3</td>
          <tr align='center'>
            <td>Row 16</td>
            <td>Cell 16,1</td>
            <td>Cell 16,2</td>
            <td>Cell 16,3</td>
          <tr align='center'>
            <td>Row 17</td>
            <td>Cell 17,1</td>
            <td>Cell 17,2</td>
            <td>Cell 17,3</td>
          <tr align='center'>
            <td>Row 18</td>
            <td>Cell 18,1</td>
            <td>Cell 18,2</td>
            <td>Cell 18,3</td>
          <tr align='center'>
            <td>Row 19</td>
            <td>Cell 19,1</td>
            <td>Cell 19,2</td>
            <td>Cell 19,3</td>
          <tr align='center'>
            <td>Row 20</td>
            <td>Cell 20,1</td>
            <td>Cell 20,2</td>
            <td>Cell 20,3</td>
          <tr align='center'>
            <td>Row 21</td>
            <td>Cell 21,1</td>
            <td>Cell 21,2</td>
            <td>Cell 21,3</td>


Richard Chimera, Design Council
[log in to unmask]
JDA Software, #1 in Software for Retail Businesses