Monday, August 14, 2006
Web 0.8
The day after I wrote the post below, I had the great good fortune to discover Stu Nicholls CSSPLaY: he has found several ways to do frames without frames and all kinds of other nifty CSS usage. So I feared I needed to mostly take back what I wrote (which is why I unpublished it for a while). After a little consideration, I wasn't entirely wrong: Internet Explorer doesn't get CSS the way other browsers do, but there is a way of restating to IE what it is you want, in CSS, in a way other browsers will ignore. In other words, browser-specific CSS for Microsoft, but you can merge it into your page, you don't have to test for the user agent and send css accordingly.
Another resource is at Frames without Frames, including an impressive interlocking tiling of panels--impossible with frames (or tables?).
The original post follows.
As talk and development of Web 2.0 (copyright O'Reilly) continues, I set myself the more modest goal of getting my
layout to do what I want: frames without frames. If Web 2.0 is about pages that automatically adapt and update themselves as you use them, Web 1.0 was about fetching requested content, possibly from multiple sources, and presenting it according to instructions provided in a standard language: html with CSS. It seems we can't even count on up-todate browsers to execute standard presentation instructions.
In other words, I want it to have a layout with a lefthand sidebar to contain interactive elements (buttons, search box, links, etc.) and constant elements (logo, icons that are the same for every page) while a broader right-hand panel would contain the page-specific content (title, table of contents, text).
The lefthand panel should be immobile (i.e. not scroll with content) whereas the page content could overflow beyond the bottom of the viewport and be navigible with a scrollbar. This could be achieved quite simply with frames. But, I've "understood" that frames are 3v!l. I set out to do it with css (and not with tables, either!).
The basic idea is that there are two boxes, one -- always!-- the full height of the viewport and about one sixth the width, the other of variable height (possibly greater than the viewport) and occupying the rest of the available width. So, I defined two "div" elements, just as I would have frames. The main difference is that frames would be retrieved separately but my page is delivered in one load.
Another resource is at Frames without Frames, including an impressive interlocking tiling of panels--impossible with frames (or tables?).
The original post follows.
As talk and development of Web 2.0 (copyright O'Reilly) continues, I set myself the more modest goal of getting my
layout to do what I want: frames without frames. If Web 2.0 is about pages that automatically adapt and update themselves as you use them, Web 1.0 was about fetching requested content, possibly from multiple sources, and presenting it according to instructions provided in a standard language: html with CSS. It seems we can't even count on up-todate browsers to execute standard presentation instructions.In other words, I want it to have a layout with a lefthand sidebar to contain interactive elements (buttons, search box, links, etc.) and constant elements (logo, icons that are the same for every page) while a broader right-hand panel would contain the page-specific content (title, table of contents, text).
| Logo search btn_1 btn_2 btn_3 link_1 link_2 link_3 | Page Title Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah. |
The lefthand panel should be immobile (i.e. not scroll with content) whereas the page content could overflow beyond the bottom of the viewport and be navigible with a scrollbar. This could be achieved quite simply with frames. But, I've "understood" that frames are 3v!l. I set out to do it with css (and not with tables, either!).
The basic idea is that there are two boxes, one -- always!-- the full height of the viewport and about one sixth the width, the other of variable height (possibly greater than the viewport) and occupying the rest of the available width. So, I defined two "div" elements, just as I would have frames. The main difference is that frames would be retrieved separately but my page is delivered in one load.
- Positioning the two boxes with "float: left" on the first and "float: right" on the second worked fine with Firefox, but not with IE6. After much playing with widths and margins, I finally managed to get the two divs next to each other in both browsers, but IE6 insisted on placing multiple scrollbars even when only one div had the "overflow: auto" property and always scrolled the "fixed" panel with the mobile content.
- IE6 also would not extend the height of the lefthand panel to the full height of the viewport just because I said "height: 100%;". But it did so when I set "height: 582px; max-height: 582px; min-height: 582px;".
- I consulted various sources (many of which I had read before), particularly the Autistic Cuckoo article Relatively Absolute. My fears were confirmed; it is not just my imperfect mastery of CSS but
Unfortunately Internet Explorer doesn't support fixed positioning. There are a number of more or less complicated ways to circumvent that, but fixed positioning isn't actually as useful as one may think. Sure, it's conceivable to have a menu in the left or right column that is always visible, but most users today expect everything on the page to move upwards when they scroll.
Emphasis mine.
So much for relying on standards to achieve simple, browser-independent layout. No wonder we see that- Lots of sites use JavaScript to provide stable (immobile) menus.
- Lots and lots of sites let everything on the page move when they scroll.
- Flash is so poplular for providing consistent, cross-platform and browser-indepent content.
Conclusion. My options seem to be:- Frames-- probably a bigger departure from the DokuWiki templates than I wish to undertake (and maintain).
- Stick with the "position:fixed; height: 100%;" and forget about IE. Optionally, add a notice below the fixed-100%-high panel advising "If you can see this, you need a new browser because yours doesn't understand layout styles!"
- JavaScript menubars.
- Not table(s).
- Give up, and accept standard, scrolling pages.
Tags: css | DokuWiki
# posted by Maurice Lanselle @ 5:28 PM 
