• Welcome to Valhalla Legends Archive.
 

Web Style Guide

Started by Grok, January 05, 2004, 04:31 PM

Previous topic - Next topic

quasi-modo

Quote from: Adron on January 08, 2004, 05:12 PM



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.
WAR EAGLE!
Quote(00:04:08) zdv17: yeah i quit doing that stuff cause it jacked up the power bill too much
(00:04:19) nick is a turtle: Right now im not paying the power bill though
(00:04:33) nick is a turtle: if i had to pay the electric bill
(00:04:47) nick is a turtle: id hibernate when i go to class
(00:04:57) nick is a turtle: or at least when i go to sleep
(00:08:50) zdv17: hibernating in class is cool.. esp. when you leave a drool puddle

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.
WAR EAGLE!
Quote(00:04:08) zdv17: yeah i quit doing that stuff cause it jacked up the power bill too much
(00:04:19) nick is a turtle: Right now im not paying the power bill though
(00:04:33) nick is a turtle: if i had to pay the electric bill
(00:04:47) nick is a turtle: id hibernate when i go to class
(00:04:57) nick is a turtle: or at least when i go to sleep
(00:08:50) zdv17: hibernating in class is cool.. esp. when you leave a drool puddle

Adron

Quote from: peofeoknight on January 08, 2004, 09:34 PM
Quote from: Adron on January 08, 2004, 05:12 PM
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

#18
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.
WAR EAGLE!
Quote(00:04:08) zdv17: yeah i quit doing that stuff cause it jacked up the power bill too much
(00:04:19) nick is a turtle: Right now im not paying the power bill though
(00:04:33) nick is a turtle: if i had to pay the electric bill
(00:04:47) nick is a turtle: id hibernate when i go to class
(00:04:57) nick is a turtle: or at least when i go to sleep
(00:08:50) zdv17: hibernating in class is cool.. esp. when you leave a drool puddle

Grok

Quote from: peofeoknight on January 09, 2004, 11:04 PM
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

#20
That is why you use the asp.net mobile controls :P. 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?
WAR EAGLE!
Quote(00:04:08) zdv17: yeah i quit doing that stuff cause it jacked up the power bill too much
(00:04:19) nick is a turtle: Right now im not paying the power bill though
(00:04:33) nick is a turtle: if i had to pay the electric bill
(00:04:47) nick is a turtle: id hibernate when i go to class
(00:04:57) nick is a turtle: or at least when i go to sleep
(00:08:50) zdv17: hibernating in class is cool.. esp. when you leave a drool puddle

Adron

Quote from: peofeoknight on January 10, 2004, 02:02 PM
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

#22
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.
WAR EAGLE!
Quote(00:04:08) zdv17: yeah i quit doing that stuff cause it jacked up the power bill too much
(00:04:19) nick is a turtle: Right now im not paying the power bill though
(00:04:33) nick is a turtle: if i had to pay the electric bill
(00:04:47) nick is a turtle: id hibernate when i go to class
(00:04:57) nick is a turtle: or at least when i go to sleep
(00:08:50) zdv17: hibernating in class is cool.. esp. when you leave a drool puddle

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

#24
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.
WAR EAGLE!
Quote(00:04:08) zdv17: yeah i quit doing that stuff cause it jacked up the power bill too much
(00:04:19) nick is a turtle: Right now im not paying the power bill though
(00:04:33) nick is a turtle: if i had to pay the electric bill
(00:04:47) nick is a turtle: id hibernate when i go to class
(00:04:57) nick is a turtle: or at least when i go to sleep
(00:08:50) zdv17: hibernating in class is cool.. esp. when you leave a drool puddle

Banana fanna fo fanna

#25
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

#26
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.
WAR EAGLE!
Quote(00:04:08) zdv17: yeah i quit doing that stuff cause it jacked up the power bill too much
(00:04:19) nick is a turtle: Right now im not paying the power bill though
(00:04:33) nick is a turtle: if i had to pay the electric bill
(00:04:47) nick is a turtle: id hibernate when i go to class
(00:04:57) nick is a turtle: or at least when i go to sleep
(00:08:50) zdv17: hibernating in class is cool.. esp. when you leave a drool puddle

dxoigmn

Quote from: St0rm.iD on January 11, 2004, 04:45 PM
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.

|