Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
[EMAIL PROTECTED] wrote:
I have been trying to implement a frameless frame system, so when I saw
this post I decided to base it on the example you linked to at
http://home.comcast.net/~rob.freundlich/css/noFrames.html
My requirements are slightly different though - I need header and
footer frames and a main content frame (with scrolllbar as appropriate).
I have modified your example to make it fit my requirements and it's very
close to working but still a little bit wonky - could you please take a
look at:
http://burieddreams.com/FixedHeaderAndFooter.html (use IE!)
On first loading you can see that the header and footer are there, but the
main content area actually extends right to the bottom (and slightly
below) - start playing with the scrollbar and you'll see what I mean.
If however you resize the window at all, suddenly it fixes itself and the
content area behaves exactly as desired. Any idea why this might be? I
assume this is why there is a window.resizeBy call, but in my IE6 it
tells me Access is denied on that line.
*most* worrying though, is it appears to completely not work in Firefox.
Try it out, it looks awful. What is breaking it? I can't see anything
weird in there that should cause problems like that. I've kept the example
fairly straight forward to hopefully make things clear.
Many thanks in advance for any replies :)
Kevi
Hi Kevi,
In the style there is:
#RegionNavigationLeft { border-right 5px solid black; ... } now (nothing
after will show);
#RegionNavigationLeft { border-right: 5px solid black; ... } could help? ;-)
Also the html-validator has some tips: DOCtype missing and so.
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
Addon:
= = = = = = = = = =
#RegionNavigation {
border-bottom: 5px solid black; height: 5em; width: 100%;}
#RegionNavigationLeft {
float: left; border-right: 5px solid black; padding: 5px; width:
33%; height: 100%;}
#RegionNavigationRight {
float: left; border-left: 5px solid green; padding: 5px; width:
auto; height: 100%;}
#RegionVisualisationWrapper {
clear: both;
width: 100%; height: 100%; margin-top: -5em;
padding-top: 5em; padding-bottom: 8em }
= = = = = = = = = =
allows Firefox performing already some more as wanted, I think.
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
I have been trying to implement a frameless frame system, so when I saw this post I decided to base it on the example you linked to at http://home.comcast.net/~rob.freundlich/css/noFrames.html My requirements are slightly different though - I need header and footer frames and a main content frame (with scrolllbar as appropriate). I have modified your example to make it fit my requirements and it's very close to working but still a little bit wonky - could you please take a look at: http://burieddreams.com/FixedHeaderAndFooter.html (use IE!) On first loading you can see that the header and footer are there, but the main content area actually extends right to the bottom (and slightly below) - start playing with the scrollbar and you'll see what I mean. If however you resize the window at all, suddenly it fixes itself and the content area behaves exactly as desired. Any idea why this might be? I assume this is why there is a window.resizeBy call, but in my IE6 it tells me Access is denied on that line. *most* worrying though, is it appears to completely not work in Firefox. Try it out, it looks awful. What is breaking it? I can't see anything weird in there that should cause problems like that. I've kept the example fairly straight forward to hopefully make things clear. Many thanks in advance for any replies :) Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
tableless table http://www.bernzilla.com/design/tables/table.html Excellent example! Now if only someone would come up with a soundless MP3 or a HTML-less web document! Reads: Tabular data is tables, as they provide oh so many more hooks for user agents and assistive technology. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
http://www.msu.edu/~maziak/umg/dra/quadrantlayout.html I am using four divs (plus others) to build frameless frames. It is starting to look good in Firefox, but not in IE/win. Please advise on any of the following issues, higher priority listed first. Any advice appreciated. 1) BOTTOMRIGHT DIV wraps (goes below) BOTTOMLEFT DIV in IE/win. I have temporarily commented out overflow:hidden in the body tag so that this is apparent when viewing in IE -- will result in extra scrollbar. 2a) Is it possible for the HEADER DIV to resize height dynamically depending on content (instead of the fixed height of 4em). This is painfully obvious when browser resized to 800x600, forcing a third line in the header - forcing the horizontal scrollbar to hide in BOTTOMRIGHT 2b) and/or force TOPLEFT and TOPRIGHT to be flush with BOTTOMLEFT and BOTTOMRIGHT (ie: vertical align bottom) ...thus allowing some whitespace immediately above. Additional notes: the four DIVs are required because I will be placing tabular data into each: think scrollable Excel data (BOTTOMRIGHT) with fixed X and Y headers (BOTTOMLEFT and TOPRIGHT). And items to tackle thereafter: 3) add synchronized scrolling (got the basic cross-browser functionality done, just need to integrate - types with fingers crossed) http://www.msu.edu/~maziak/umg/dra/synchronizedscroll.html 4) how to align the rows and columns in BOTTOMRIGHT with BOTTOMLEFT and TOPRIGHT If I use tables, one long string can break alignment of several columns; but if I use DIVs (with overflow:hidden) I need to use percentages--neither an ideal solution :( ANY advice appreciated! Thanks, -Pete References: frameless frame http://home.comcast.net/~rob.freundlich/css/noFrames.html synchronized scroll http://webfx.eae.net/dhtml/syncscroll/demo1.html tableless table http://www.bernzilla.com/design/tables/table.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
hi! don't you think tables are neccessary to provid structure in datasets? you should indeed read: http://www.usability.com.au/resources/tables.cfm seems offtopic, but this is too important for me. tables are not useless. henry. 2006/1/6, Maziak, Peter (Tek Systems) [EMAIL PROTECTED]: http://www.msu.edu/~maziak/umg/dra/quadrantlayout.html I am using four divs (plus others) to build frameless frames. It is starting to look good in Firefox, but not in IE/win. Please advise on any of the following issues, higher priority listed first. Any advice appreciated. 1) BOTTOMRIGHT DIV wraps (goes below) BOTTOMLEFT DIV in IE/win. I have temporarily commented out overflow:hidden in the body tag so that this is apparent when viewing in IE -- will result in extra scrollbar. 2a) Is it possible for the HEADER DIV to resize height dynamically depending on content (instead of the fixed height of 4em). This is painfully obvious when browser resized to 800x600, forcing a third line in the header - forcing the horizontal scrollbar to hide in BOTTOMRIGHT 2b) and/or force TOPLEFT and TOPRIGHT to be flush with BOTTOMLEFT and BOTTOMRIGHT (ie: vertical align bottom) ...thus allowing some whitespace immediately above. Additional notes: the four DIVs are required because I will be placing tabular data into each: think scrollable Excel data (BOTTOMRIGHT) with fixed X and Y headers (BOTTOMLEFT and TOPRIGHT). And items to tackle thereafter: 3) add synchronized scrolling (got the basic cross-browser functionality done, just need to integrate - types with fingers crossed) http://www.msu.edu/~maziak/umg/dra/synchronizedscroll.html 4) how to align the rows and columns in BOTTOMRIGHT with BOTTOMLEFT and TOPRIGHT If I use tables, one long string can break alignment of several columns; but if I use DIVs (with overflow:hidden) I need to use percentages--neither an ideal solution :( ANY advice appreciated! Thanks, -Pete References: frameless frame http://home.comcast.net/~rob.freundlich/css/noFrames.html synchronized scroll http://webfx.eae.net/dhtml/syncscroll/demo1.html tableless table http://www.bernzilla.com/design/tables/table.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
You are correct that tables are good for tabular data. But I have an unusual circumstance where I need to break up the table into four divs, which leads to the challenge of alignment of columsn/rows. If I have a long string in a table cell, it will force/break the alignment columns. So an alternate is to use divs with overflow set to hidden. You won't see the entire string in that div (cell), but at least it won't break all the columns. BTW, I realized the synchronized scroll (#3) is reversed. horizontal scroll should control div above and vertical scroll should control div to the left (will fix) From: heinrich klassen [mailto:[EMAIL PROTECTED] Sent: Friday, January 06, 2006 2:33 PM To: Maziak, Peter (Tek Systems) Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel) hi! don't you think tables are neccessary to provid structure in datasets? you should indeed read: http://www.usability.com.au/resources/tables.cfm seems offtopic, but this is too important for me. tables are not useless. henry. 2006/1/6, Maziak, Peter (Tek Systems) [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] : http://www.msu.edu/~maziak/umg/dra/quadrantlayout.html I am using four divs (plus others) to build frameless frames. It is starting to look good in Firefox, but not in IE/win. Please advise on any of the following issues, higher priority listed first. Any advice appreciated. 1) BOTTOMRIGHT DIV wraps (goes below) BOTTOMLEFT DIV in IE/win. I have temporarily commented out overflow:hidden in the body tag so that this is apparent when viewing in IE -- will result in extra scrollbar. 2a) Is it possible for the HEADER DIV to resize height dynamically depending on content (instead of the fixed height of 4em). This is painfully obvious when browser resized to 800x600, forcing a third line in the header - forcing the horizontal scrollbar to hide in BOTTOMRIGHT 2b) and/or force TOPLEFT and TOPRIGHT to be flush with BOTTOMLEFT and BOTTOMRIGHT (ie: vertical align bottom) ...thus allowing some whitespace immediately above. Additional notes: the four DIVs are required because I will be placing tabular data into each: think scrollable Excel data (BOTTOMRIGHT) with fixed X and Y headers (BOTTOMLEFT and TOPRIGHT). And items to tackle thereafter: 3) add synchronized scrolling (got the basic cross-browser functionality done, just need to integrate - types with fingers crossed) http://www.msu.edu/~maziak/umg/dra/synchronizedscroll.html 4) how to align the rows and columns in BOTTOMRIGHT with BOTTOMLEFT and TOPRIGHT If I use tables, one long string can break alignment of several columns; but if I use DIVs (with overflow:hidden) I need to use percentages--neither an ideal solution :( ANY advice appreciated! Thanks, -Pete References: frameless frame http://home.comcast.net/~rob.freundlich/css/noFrames.html synchronized scroll http://webfx.eae.net/dhtml/syncscroll/demo1.html http://webfx.eae.net/dhtml/syncscroll/demo1.html tableless table http://www.bernzilla.com/design/tables/table.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
Pete,
On Jan 6, 2006, at 5:24 PM, Maziak, Peter ((Tek Systems)) wrote:
http://www.msu.edu/~maziak/umg/dra/quadrantlayout.html
1) BOTTOMRIGHT DIV wraps (goes below) BOTTOMLEFT DIV in IE/win. I have
temporarily commented out overflow:hidden in the body tag so that this
is apparent when viewing in IE -- will result in extra scrollbar.
This is caused by that very long line of text with no spaces. IE
forces $bottomright wide enough to contain it and therefor it will no
longer fit.
2a) Is it possible for the HEADER DIV to resize height dynamically
depending on content (instead of the fixed height of 4em). This is
painfully obvious when browser resized to 800x600, forcing a third line
in the header - forcing the horizontal scrollbar to hide in
BOTTOMRIGHT
2b) and/or force TOPLEFT and TOPRIGHT to be flush with BOTTOMLEFT and
BOTTOMRIGHT (ie: vertical align bottom) ...thus allowing some
whitespace immediately above.
I don't think this can be addressed with css alone. I'd suggest the
following css
* {
margin: 0; padding: 0;
}
body {
background-color: white;
}
#header{
background:#CC;
}
#contentWrapper{
clear: both;
overflow: auto;
}
#topleft{
float:left;
width:400px;
border:1px solid orange;
}
#topright{
margin-left:402px;
border:1px solid purple;
}
#bottomleft{
float:left;
width:400px;
overflow:auto;
border:1px solid red;
display:inline;
}
#bottomright{
overflow:hidden;
border:1px solid blue;
}
-
On page load, use javascript to calculate the height of #contentwrapper
so it just fits in the window. The scroll bar for the window will
disappear and be replaced by a scroll bar for #contentwrapper. I used
to have code for this, but it appears to be lost. It boiled down to
getting the top of #contentwrapper and the height of the content area
of the window subtracting to get the height to set for #contentwrapper.
If the user has javascript turned off, the content is still available,
is just looks like a regular web page.
Additional notes: the four DIVs are required because I will be
placing tabular data into each:
You will have to set widths on all the columns anyway (unless you want
to let the browser calculate col widths and read them on page load),
and you can set overflow to hidden on the contents of the table cell if
necessary. I did a mock-up of the iTunes interface once, and it turned
out that the most natural way to do this is to wrap the table in a
container div. Imagine your second page with tables inside of divs...
In fact, If you want to get really fancy, you can keep the markup
semantic and use javascript to remove row 1 and col 1 (the th elements)
and add #topright and #bottomleft to the markup on the fly. If you
decide to go this route and want javascript help, contact me off-list
and I'll see what I can put together.
hth (ps, I'm in Michigan too!)
Roger,
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
