Free Courses Available

You can now take courses in standards-based web development. The Maker of the browser Opera, who is an association with Yahoo Developer Network, are offering courses that are geared towards those interested in learning more. This can be useful to those coming from a university, school or other educational settings. Those whose interests are in studying, teaching, or a campus computer lab background may be of interest as well. These courses are downloadable free of charge at http://www.opera.com/education/ There are several chapters of information provided and its great way to stay in the know.

CSS Resource Guide

This page contains a list of links to various CSS-related resources. You will find other resources that offer a wide variety of modern tips and inspiration.
http://www.mezzoblue.com/zengarden/resources/

CSS table-less forms (no tables)

Creating tables for forms can be a real pain. Better to make a form style sheet and keep it handy to reuse, then use lables for your form field names, here is a great example.

<form>

 <label for="name">Name</label>
 <input id="name" name="name"><br>

 <label for="address">Address</label>
 <input id="address" name="address"><br>

 <label for="city">City</label>
 <input id="city" name="city"><br>
</form>

Note that you must use both id and name. See the
Forms - id vs. name page for more information.

CSS

The CSS is slightly more complex, but only slightly.

label,input {
 display: block;
 width: 150px;
 float: left;
 margin-bottom: 10px;
}

label {
 text-align: right;
 width: 75px;
 padding-right: 20px;
}

br {
 clear: left;
}

First of all we give both labels and inputs a display: block. This allows us to line them up
nicely. They get a width (though I later overrule it for the labels), a margin-bottom
for a nice layout.

Finally both tags get a float: left. Declaring the float
on both elements allows us to ignore the differences in float model between Explorer and the other browsers.
I'm not yet sure why this works, but it works.

label,input {
 display: block;
 width: 150px;
 float: left;
 margin-bottom: 10px;
}

Some extra nice layout stuff for the label tags:

label {
 text-align: right;
 width: 75px;
 padding-right: 20px;
}

Finally, as the keystone, we give the br tag a clear: left, that is: any previously
defined float is canceled. We have to insert a clear somewhere, or all labels and inputs
would line up next to each other, which is not what we want.

I elected to declare the clear on the br, because the only other option (declaring it
on the labels themselves) didn't work properly in Opera.

br {
 clear: left;
}

Thanks to http://www.quirksmode.org/css/forms.html for this cool CSS trick.