Stu Nicholls' (CSS Play) CSS Frames Demo Layout 2 Design

HTML Source, Tables, CSS, JavaScript, and Embed/Object.

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Stu Nicholls' (CSS Play) CSS Frames Demo Layout 2 Design

Postby Ikaros on Tue Oct 14, 2008 2:00 am

Can someone help me appreciate what is going on "under the hood" on this interesting layout demo by Stu Nicholls of CSS Play:

http://www.cssplay.co.uk/layouts/body2.html

What intrigues me about this CSS Frames approach is the scrollbar behavior. What I mean is normally in a CSS frames simulation, the scrollbar is only next to the scrolling contents DIV area. In Stu's demo, the scrollbar covers 100% of the page height!

This is good in a way because with a normal scrollbar at the contents only, it causes the horizonal center of the page to be offset by the width of the scrollbar with respect to the header and footer where no scrollbar would normally be.

So what am I seeing here? Is he playing with the header and footer DIV's using Z-index such that the contents area is actually sliding under the header and footer? If so its an interesting approach.

My question is regarding IE6/IE5 compatibility and hacks to make position absolute work like position fixed. But if we are looking at Stu's demo layout 2 and its really just a regular scrolling page with header and footer divs sort of layered over, would you really need to hack anything to make it compatible?
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby dr john on Tue Oct 14, 2008 8:27 am

The z-index values means some bits are on sitting top of other bits. There are several places where height:100% is used., to fill the available viewport. Plus some position:fixed and absolute bits (IE6 doesn't understand the fixed bits)

The apparent frames to the left, top and bottom are the fixed higher z-index bits, the content is underneath them, and being bigger than the viewport, then the standard scroll bar is displayed, the length of the viewport, just as with this page you are reading. so it is a standard page's scrollbar.

I really think you should forget these retro frames designs ;)
They were invented when people didn't know much about the web and needed the menu always in front of them to reminder then about things, as scrolling back to the menu was a new concept. (Applications have fixed menus, and frames helped emulate this familiar concept. but now we are all a bit more web savvy and don't need them.)

Also, as I've said before, stop trying to invent your own hacks as they are likely to go wrong in other browsers. If you wish to use Stu's layout, you can clearly read on his page that it works in the ancient browsers, and I can see it working in FF and IE7, so why do you want to attempt to hack something that already works??? Inventing hacks takes a lot of effort anyway, and requires a deep understanding of how many different browsers work and how css and html work. I certainly wouldn't try to invent a hack.

Ps here's another of stu's frames emulations
http://www.cssplay.co.uk/layouts/frame.html
dr john
 
Posts: 790
Joined: Sat Aug 18, 2007 11:35 am

Postby charlescooke on Tue Oct 14, 2008 8:36 am

This wouldn't satisfy me as an emulation of frames behaviour but it works in limited cases.
I think the explanation is that the scrolling 'frame' is actually full page height. It only looks less because the header and footer cover parts.
Put an anchor somewhere in the page and create a link to it. When you click the link you won't see the place marked with the anchor because it is hidden behind the header! O dear me.
You are right. The #head and #foot have position: fixed, or absolute with some browsers, and a high value for z-inxdex.
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

Postby Ikaros on Tue Oct 14, 2008 10:03 am

I don't wish to hack anything to make it work. I want to avoid them. I was just wondering if Stu's example here used any true hacks because with a full page scrolling I was wondering why it would even need any. I don't want to do anything with quirks mode involved.
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby Ikaros on Wed Oct 15, 2008 8:00 pm

On this topic - I realize with anything resembling a frames layout people either hate them or love them - so if I'm creating any page involving scrolling and/or floating DIV's, what should I avoid in CSS (like position: fixed being bad under IE5/IE6) that would break browser verison compatibility when using the HTML 4.01 Strict doctype?
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA

Postby charlescooke on Thu Oct 16, 2008 7:39 am

I don't think there is any general answer to the question.
One starting point is 'do you want IE≤6 to behave exactly as other browsers' or 'do you want it to behave in some other but still acceptable manner'.
I adopt the latter approach which allows me to produce pages which offer a better user experience to visitors having modern browsers but still work and be navigated using IE≤6.
As an example, my page at http://www.charlescooke.me.uk/web/lab_notes/targeting.html has a fixed position menu. In IE6 this would be rendered as relative position and would push the main content down. I could put the code for this at the end of the file so that the main content would stay where it should be but the menu would be virtually inaccessible. Instead in IE≤6 I change it from fixed to absolute position.
By a piece of serendipity the same page tells you how that is done.
I am not suggesting this is a general solution to the problem, It depends on what the page layout structure is - or what you could make it and still achieve your objective.
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

Postby Ikaros on Thu Oct 16, 2008 11:56 am

Thanks Charles, I agree with your logic and approach! Good tips too on your page and with the Bruce Lawson article link you provided. This will give me a good perspective to think about when tackling these issues.

Ikaros

Browser to browser: Why can't we all get along?
Gateway FX530 - Windows Vista, Intel Q6600 CPU, 4gb RAM, 500gb RAID-0 HD, Dual DVD/RW, Nvidia 8800GTX 768mb GPU, 22" Widescreen LCD, TV Tuner, Creative X-FI Audio, Logitech G15 Keyboard, Logitech MX518 Mouse, Logitech Headset, Iomega 500gb USB HD
Ikaros
Assistant Admin
 
Posts: 275
Joined: Wed Feb 06, 2008 8:15 pm
Location: Maryland, USA


Return to Advanced Design Q & A


Who is online

Users browsing this forum: No registered users and 2 guests