Web Style Guide

[quasi-modo]

All those three-column layouts look awful at less than 800x600. The outermost table columns overlap instead of shrinking proportionally. Fix that so it works just like html tables?

They are supposed to overlap, the content overlaps the links its z-index. It was designed to do that. if you do not want it to you just delete the z-index attributes in the css files. It is only designed to make sure the content is accessable at all times since the link columns do not stretch (nor would you want them too, look like crap if it did) so you do not want the center to get supper tiny.

[quasi-modo]

And anyways those layouts are just to serve as examples, if you used it you would obviously modify it, that is just to show how to make it fluid and still keep 3 cols.

[Adron]

All those three-column layouts look awful at less than 800x600. The outermost table columns overlap instead of shrinking proportionally. Fix that so it works just like html tables?

They are supposed to overlap, the content overlaps the links its z-index. It was designed to do that. if you do not want it to you just delete the z-index attributes in the css files. It is only designed to make sure the content is accessable at all times since the link columns do not stretch (nor would you want them too, look like crap if it did) so you do not want the center to get supper tiny.

They should stretch if they can't fit on screen. Which is better: An unreadable column or a readable but not so good looking column?

[quasi-modo]

the middle column does stretch. It will only overlap at resolutions below 640 x 480. Well the bluerobot one anyway. It does not overlap unless it is very small, smaller then any resolution anyone is actually going to have. people at 640x480 do not run around with browser windows that are not maxed anyway. I think that is safe to assume. But the content overlapping the cosmetics is what it is designed to do, as a precaution. But if you do not want it to overlap at all or you want a min width and horizontal scrollbar just delete the lines of code with z-index in them and then use min-width:200px; or whatever.

[Grok]

the middle column does stretch. It will only overlap at resolutions below 640 x 480. Well the bluerobot one anyway. It does not overlap unless it is very small, smaller then any resolution anyone is actually going to have. people at 640x480 do not run around with browser windows that are not maxed anyway. I think that is safe to assume. But the content overlapping the cosmetics is what it is designed to do, as a precaution. But if you do not want it to overlap at all or you want a min width and horizontal scrollbar just delete the lines of code with z-index in them and then use min-width:200px; or whatever.

That is not safe to assume!  The whole purpose of xhtml/css is so unknown reader types can render content appropriately.  We should expect that devices other than screens will be reading the data.  A cel phone has a display resolution much less than 640x480, maxxed or not.

[quasi-modo]

That is why you use the asp.net mobile controls . The reason one would use z-index would be to make the content deliverable no matter what the resolution is, if the sides do not stretch but the middle does (which looks b etter) that means the middle could be 1 letter per line or less unless you make it overlap the nav bars etc. If you read the comments in the css, you would see why they used z-index. If you do not want it to overlap then just delete the z-index, but is there so even if the layout gets masacred at a low res the person can still get the content because it is more important. We all aggree that content > cosmetics correct?

[Adron]

We all aggree that content > cosmetics correct?

Yes. I was assuming this layout would be filled with "content". Like links and headlines for content in the two edge columns and text content in the center column. Then you have to be able to access all columns to navigate the site successfully. I have seen several sites recently that are unreadable at 800x600 because the columns overlap and cover the text.

[quasi-modo]

Yes but the layouts at bluerobot do not overlap until well below 800 by 600. It is preferable to have a whole other page for mobile divices, by using say asp.net mobile controls to make it adaptable. Also like I have been saying all along, if overlapping isn't your thing then just get rid of the z-index and it will not happen.

[Grok]

It seems to me you may have missed the purpose of CSS, and the message those sites (which you provided links for) were trying to get across.  That message is you don't design for screens, devices, or pages.  You don't even think like that.  If you follow the recommendations for CSS, it won't matter whether you're obtaining the data via a web browser, a cel phone, or braille gloves.  The content will be appropriately accessible by each handler device.

So when Adron points out that the 'page' is not properly readable on a display page device at resolutions under 800x600, this is proof that the CSS used was not correctly implemented.  After all--a display "screen" is probably what most of even those authors were thinking when they designed the box examples.  Yet even on a screen, it breaks.

It's some good work published, and gets people thinking more correctly.  However, anyone can make mistakes, and Adron may have found some already.

[quasi-modo]

whatever dude, you missed the whole point of ie hacks, you thought I was using them to "break ie", I design for all platforms and all devices, I missed nothing. If you have a mobile device you use mobile controls because is obviosuly not going to work on a normal layout. My sites work on lynx. So do not give me that junk. Those layouts, the ones at bluerobot you say are done incorrectly? They work at reolutions below 640 by 480, they will work for any computer's resolution. The guy who rote them knows his stuff too, they are done correctly. The whole idea of it overlapping is so that the person can still read the content even if his browser window will not allow the other stuff to be displayed. I have said that numerous times but you stil did not pick up on that.

[Banana fanna fo fanna]

Here goes.

You put all your "content" in a bunch of divs, with either an ID or a class, depending on your style.

Then inside your page, you link to a certain stylesheet depending on the media (cellphone browser etc).

[quasi-modo]

Isn't that the logic behind mobile controls, it does it for you, it will link it differently for cellphones, palm pilots, pocket pcs, etc? If someone with a cell phone visits your site you can't even have flanking menus, that is another reason for it to overlap, if you have cell phone visiters (which I wouldnt have any on a regular site) you would provide backup navigation for them.

[dxoigmn]

Here goes.

You put all your "content" in a bunch of divs, with either an ID or a class, depending on your style.

Then inside your page, you link to a certain stylesheet depending on the media (cellphone browser etc).

There is a standard for using ID vs class.  ID is reserved for unique elements, no more than one element may have the same ID.  With class, you are free to break that very rule.

[Banana fanna fo fanna]

I'm still debating whether or not to use a class or id for each column, though. I'm leaning towards id.

[Adron]

I'd say you're not supposed to design web pages that look the same on all browsers. Making a design that requires a page to look exactly the way you tried to make it look is making a flawed design.