Resizable Layouts
One thing that is surprisingly (and annoyingly) difficult to do in HTML and CSS are resizable layouts. By resizable layouts, I mean web pages that fill a browser window, even if you resize the browser window. And it is difficult to do this either horizontally or vertically (or both at the same time), which is what I wanted to do with ZAT.
Resizable layouts are very common in normal (non-web) applications, so it is strange that they are so difficult to do for web apps. And it is especially strange, because HTML was originally all about resizable layouts. If you create a static web page, you have to actually work hard to not have it fill the entire window and reflow as you resize the page.
But once you start putting in navigation side bars and things like that, it gets dicey. I always figured that this was some sort of revenge that designers wreaked on the web, since they have been trained on media like print and TV, which do not resize. What else could explain the large number of websites today that are of fixed width, forcing you to either resize your browser window wider in order to see all of the content (or — horrors — using a horizontal scroll bar constantly to move back and forth), or alternatively if your browser window is wider than the content, live with vertical stripes of whitespace on the left and right side of the window, wasting screen real estate (which then forces you to use the vertical scroll bar to move down the page more often).
For ZAT, I wanted the following layout:
- A small navigation bar at the top. The left side of this bar is the top-level navigation, to allow you to select between the major tasks in ZAT (browsing, changing your preferences, adding new information, and viewing other information about ZAT). The right side of the navigation bar identifies who you are, and has links to let you sign in (or sign up, if you are not already registered).This navigation bar is fixed height, so that is reasonably easy to do with CSS. The bar is also the full width of the window, also reasonably easy. Laying out some things on the left and some things on the right is a little more complicated, but doable. In the end, I actually used a table (which the designers seem to abhor) so that the navigation buttons would spread out as the page gets wider. I also do the standard tricks, like using :hover so that navigation buttons highlight when the cursor is over them (to encourage you to press them, I suppose).
I experimented with having three sections in the navigation bar (one left aligned, one right aligned, and one centered between them) but that was much more difficult to do gracefully, and get it to work reliably on all browsers, so I dropped it.
For now, I am not using any drop-down menus, but that may change as the site gets more complicated, and people want to jump directly to specific pages.
- Second, there is an area that depends on the specific page. Typically it is a form, with information you fill in or widgets to control what is displayed. The height of this section is highly variable, and in fact it can change in height as you type in information. This form/control area is laid out using normal HTML flow constructs. It often has multiple columns.
- Jumping to the bottom of the page, there is an info bar. Currently, the info bar just says “Z to A Travel” and is of fixed height, but eventually it will contain other information. For example, as ZAT joins various professional travel associations, their logos might go here. And various logos indicating that ZAT is secure, trustworthy, safe, etc. Many sites put the “built using X” logos here, but I think I’ll leave those off.
- Finally, there is a map. Here’s the hard part. I want the map to take up all the remaining space, from the bottom of the second part (the form) to the top of the info bar. Furthermore, I want the map to be a minimum height. If the window is not tall enough to allow this, then I want the window to have a vertical scroll bar. Currently, the map has a minimum height of 500 pixels. If the combined height of the navigation bar, form/control, map, and info bar is too tall, the whole window gets a scroll bar (so the info bar and possibly the bottom of the map is scrolled off the bottom of the window). If you scroll down, the navigation bar scrolls off the top, and possibly the top of the form.
This is an interesting layout, very different from the multi-column layouts that seem so popular today. The purpose was to give as much space to the map as possible, since ZAT is primarily a map-based webapp. Even so, there are plenty of map-based web apps that use multi-column layouts. For example, Google Maps, which has a navigation area across the top. The rest of the page is divided into two columns: a control area on the left (fixed width) and the map on the right. The map resizes itself as you resize the page. I find this awkward, and it cannot deal with minimum sizes (the window never scrolls).
In the end, there was no way to implement what I wanted using HTML and CSS. I used JavaScript to respond to resize events, to layout the page after each window resize. The only complicated part was calculating the size of the form/control area. You have to walk up the DOM hierarchy, adding up heights, to determine the total height of this area. After that, since the navigation bar and the info bar are fixed height, you can easily calculate the area remaining for the map. If this is less than 500 pixels, I simply set it to 500 and let the page scroll.
Width is easier, since everything is full width, and just resizes using normal HTML flow constructs as you resize the width of the window. This is a little more complicated in the form/control area, since it will often contain multiple columns, but it can be done in CSS without too much pain.
Why I have to use JavaScript to do a layout like this is beyond me, and is one more reason I think CSS sucks.
–wm