DiV/CSS vs tables....start me off

[pelsar]

ok guys this is your big chance...i've come to the inevitable conclusion that i have to learn about DIVs/CSS etc.

dont forget i come from a visual world where if a column is too wide i simply grab the vertical line and move it to where i like it.

so where do i start off "reprogramming" my mind to understand the DIV universe (and is there anything visual about it? or is it all letters and numbers?

___

ideally..at least in the beginning it would be nice to have a magic tool that could convert a 3 column table into a bunch of divs....

 

[angelwatt]

I'd actually start with the stickies in this forum. They have some good information and I believe there's some good links for CSS.

 

[jakk2809]

The great thing about divs is the ability to encapsulate divs within each other and the amount of control you get from divs. A table is pretty static and can't change much. A div is a form of a box that can be edited to your exact specs. Depending on the situation, divs are better than tables.

For example when you want to make a page with distinct columns or sections like http://www.apple.com/iphone/

It would be very hard to do this sort of layout efficiently with tables.

 

[ksb43]

Once you get the basics of CSS down this is a great resource:

http://www.alistapart.com/

The point of CSS is to separate structure and design as much as possible. In other words, your HTML should really only contain the content of the page in a logical structure that is independent from design. Then you use CSS to make your page look the way you want. If you want to get technical about web standards, you should only use tables for tabular data.

You might want to read this:

http://www.amazon.com/Designing-Web...=sr_1_1?ie=UTF8&s=books&qid=1224613201&sr=1-1

 

[themoonisdown09]

This website will teach you CSS, give you tutorials and examples: http://www.w3schools.com/css

By the way, I like using the W3 Schools website as a good web design reference. There is a whole lot more than just css on this site.

 

[lucidmedia]

The point of CSS is to separate structure and design as much as possible. In other words, your HTML should really only contain the content of the page in a logical structure that is independent from design. Then you use CSS to make your page look the way you want. If you want to get technical about web standards, you should only use tables for tabular data.

I wanted to second this! This separation of content and form cannot be stressed enough!

HTML defines the semantic relationships between CONTENT. (i.e. "This is a headline", "This is a paragraph", "This is a sidebar").

CSS rules define how to visually represent that content. (i.e. "sidebars should be placed on the right of the page and be set in a smaller typeface"). CSS defines FORM (color, position, etc.)

The key here is extensibility and reusability. If you have coded to web standards you can use the same content and render it differently on an iphone browser than a standard browser. Same HTML, different CSS rules.

When it comes time to redesign/refresh your site, only the CSS needs to change as the content does not change, only the way the content is treated visually.