A rant driven by an HTML shortcoming. I want something simple – I want to be able to create a layout like this without using frames. But I can’t. Simple desire – I want a left menu and a top header that are fixed, and a content area that fills the rest of the browser area, and can scroll, but the content scrollbar should be the only scrollbar on the screen, and the header and navigation should remain fixed.
The fact of the matter is that frames suck – the page you see is driven by frames. Many mobile devices that support HTML don’t support frames, and it’s silly to have to load 4 different html pages to display that one screen. It’s nearly impossible using Struts to get a good Tiles template together to use frames. The main option seems to be using the getAsString tag in your layout file to indicate which page should be loaded into that frame. The problem is that you really want a more detailed template than that. You’d like your template to be define parts of each frame as well, but since the user’s browser loads the frameset, and the browser then requests each of the 4 pages, you lose your request context, and you can’t use tiles:insert in each frame. Further, any data that you stored in request scope is lost by the time you get to rendering actual content.
I’ve tried this technique to render the same view using scrollable DIV areas, but it failed. The problem is that the header needs to be a fixed size, and the content area should be able to take up the rest of the page. Frames have the * operator to indicate that an area should take whatever space is available. A COLSET can use the same thing. Strangely, for rows, there’s no such attribute. It’s as though the idea of a page designer wanting the height of the page to match the height of the browser window is completely foreign. It truly amazes me that we’ve been using HTML for so long and there’s still no way to express such a simple idea without using the atrocity (and web app unfriendly construct) that is frames.
Addendum: I realize that HTML was never intended to do half the things it does currently. What amazes me is that we haven’t managed to standardize something better (where standardize means cross-browser compatible).
Yes you can.
Just set the body content height to be 100%, and the header and footer to have fixed width and put it at the top and bottom.
Have a read http://www.google.com/search?q=tableless+css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8
Is the fixed width header a necessity? The resizable header is a necessary part of the site design.
Here is an example of what you want to do:
http://www.colinux.org/wiki/index.php/coLinuxNetworking
HTML was never designed to do stuff like that. It’s amazing that you can make it do that. Using HTML for stuff like that is using a GUI Windowing system as an operating system….
About that colinux site – it’s the right idea, but a spotty implementation. In IE6, the formatting is completely hosed – a massive blank space to the left, and the navigation shows up in the same column as the content.
In FireFox, it looks better, but the scrollbar for the content area actually extends under the header! When I shrink the window size, a bottom scrollbar appears that actually lets me slide the content under the navigation pane.
Any other suggestions?
have you tried using IFrames? I don’t know if mobile devices support them yet but i’d be willing to be they’re coming soon.
IFrames have the same issue as standard frames – the browser makes a second set of requests when if finds the iFrame – that request has none of the original request context, including the tiles data needed to insert the content and any data you may have been passing to your content area.