469,908 Members | 2,069 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,908 developers. It's quick & easy.

"floating" headers above scrolling grid

Hi,

I have a caontainer div that is 80% of the width of my display and 40em
high. It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines... so it will scroll. All of this is
working. Each column has a heading that, as the scrollbar is moved,
scrolls away just like the regular detail info.

So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible. I am having a heck of a time
making this work and wonder if any of you have ideas?

so I have something like

<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
</div>
</div>

I want something like:
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div style="float: left; width: 100%>
<h3 style="display: inline;">header</h3>
<h3 style="display: inline;>header2</h3>
<h3 style="display: inline;>header3</h3>
</div>
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
...content...
</div>
</div>
</div>
The problem is that the scrollbar interferes with the inner widths of
the content columns so that the headers do not line up correctly.
ideas?

Oct 2 '06 #1
7 9437
On 2006-10-02, seven.reeds <se*********@gmail.comwrote:
Hi,

I have a caontainer div that is 80% of the width of my display and 40em
high. It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines... so it will scroll. All of this is
working. Each column has a heading that, as the scrollbar is moved,
scrolls away just like the regular detail info.

So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible. I am having a heck of a time
making this work and wonder if any of you have ideas?

so I have something like

<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
</div>
</div>

I want something like:
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div style="float: left; width: 100%>
<h3 style="display: inline;">header</h3>
<h3 style="display: inline;>header2</h3>
<h3 style="display: inline;>header3</h3>
</div>
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
...content...
</div>
</div>
</div>
The problem is that the scrollbar interferes with the inner widths of
the content columns so that the headers do not line up correctly.
ideas?
You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.
Oct 3 '06 #2
You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.
interesting idea, thanks. It is not quite doing what I had hoped for
though. I just know I'm going to have to do some semi-heroic
javascripting to get column deminsion hints from the column divs inside
the scrolling div and then draw or adjust the headings. This seems
like way too much effort for column headings. Maybe the person
demanding this behaviour will eventually listen and let the headings
scroll.

Oct 3 '06 #3
"seven.reeds" <se*********@gmail.comwrote in
news:11**********************@e3g2000cwe.googlegro ups.com:
>You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.

It is not quite doing what I had hoped for
though.
Well, you originally asked for:
So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible.
Doesn't the "position: fixed" do exactly that?

Oct 3 '06 #4
seven.reeds wrote:
It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines...
[...]
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
Errr... this is a data table. Use <table>, <tr>, <th>, <tdand friends --
not this DIV muck.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Oct 3 '06 #5
seven.reeds wrote:
Hi,

I have a caontainer div that is 80% of the width of my display and 40em
high. It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines... so it will scroll. All of this is
working. Each column has a heading that, as the scrollbar is moved,
scrolls away just like the regular detail info.

So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible. I am having a heck of a time
making this work and wonder if any of you have ideas?
Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>

--
Gus
Oct 3 '06 #6
Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>
Hi Gus,

Yes, something exactly like that. I have also found other discussions
on doing this with non-standards complient browsers. For example:
http://www.agavegroup.com/?p=31 This example is not perfect for me but
it gets me in the ballpark

cheers,

Oct 4 '06 #7
seven.reeds wrote:
>Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>

Hi Gus,

Yes, something exactly like that. I have also found other discussions
on doing this with non-standards complient browsers. For example:
http://www.agavegroup.com/?p=31 This example is not perfect for me but
it gets me in the ballpark
Check out this:
<http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html>

--
Gus
Oct 4 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by John | last post: by
4 posts views Thread by bugbear | last post: by
18 posts views Thread by woessner | last post: by
4 posts views Thread by John Friedland | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.