"Correct" use of CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

"Correct" use of CSS

Post by nielsene »

Having finally gotten free of legacy browsers (10% down to 0.01% and that one appears to be a search engine) I'm trying to do things the right way. However I haven't found many good tutorials on this yet.

There are loads of tutorials showing how to make such-and-such a layout with CSS, and many addressing how to use it in ways that will be bug-compatible on many browsers. What I'm interested in is more of the "theoretical/ideal" world -- assume that the browser is completely CSS1 compliant. I plan to have two or more versions of the site: one is the current legacy version the other the fully compliant XHTML 1.0 Strict/CSS1 version.

With that as the framework, can anyone help with these questions?
1). Are there good tutorials on "proper" structure/layout seperation that go beyond the simple "here's a three column layout" -- heuristics to determine when to use div's or when to use class/id tag on existing elements?
2). In this "ideal" world, the only correct use of tables is for tabular text/numbers as in scientific results and similar, correct? Using tables to align form elements would be incorrect, yes? Is there a correct way to align form elements -- using a pair of divs seems wrong as that ends up grouping all the labels seperate from the elements which would be exteremly bad for non-visual users.
3). Following from the above, divs are vertical grouping structures that tend to apply horizontal extents to their members. spans are kinda the flip, horizontal groupings that apply vertical extents, amoung other things. Tables are 2-D structures that apply 2-D constraints. Are there elements to provide horizontal grouping, but horizontal layout within that don't have the negative view as tables?

Eric
User avatar
mydimension
Moderator
Posts: 531
Joined: Tue Apr 23, 2002 6:00 pm
Location: Lowell, MA USA
Contact:

Post by mydimension »

here are some articles that i believe would be helpful:

anything on http://www.alistapart.org/
a listing of CSS related articles on ALA - http://www.alistapart.com/stories/indexCSS.html
an article that seems to fit the need you described - http://www.alistapart.com/stories/practicalcss/

also feel free to contact me as i love doing ALL my design work with CSS
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post by nielsene »

Thank you. Those links seem to be the exact type of tutorial I was looking for. Did you know about them before hand, or just good google-ing? If the latter, what search terms help remove all the "beginner" type css tutorials.
User avatar
mydimension
Moderator
Posts: 531
Joined: Tue Apr 23, 2002 6:00 pm
Location: Lowell, MA USA
Contact:

Post by mydimension »

someone told be about that site earlier this year and since then it has become like my web design bible. i still have yet to read every article because the information is so dense.

a good search term to use might be "independent coders" because all those beginner sites are nearly corporate functions.
CodeEye
Forum Commoner
Posts: 25
Joined: Fri Jul 05, 2002 7:19 am

Post by CodeEye »

these sites are both very usefull i am desighning my site around these i don't agree with 13thparallel.org use of innerhtml though
http://www.13thparallel.org/?issue=2002 ... _structure

http://www.dhtmlcentral.com/tutorials/t ... .asp?id=14
kawika
Forum Newbie
Posts: 6
Joined: Wed Sep 18, 2002 8:34 pm
Location: San Diego

13th parallel promoting standards? not quite

Post by kawika »

I agree on the innerHtml point and when did light gray text on white page background become a standard? Ouch, it hurts just to look at it.
Post Reply