“Professional service
that won't make you nervous”

Macintosh  Perl  Linux

HTML4 & CSS2 tutorials, experiements, and musings...

Over the past few years I've been working very heavily exploring and experimenting with the things you can do using modern website design techniques. Gone are the tables-based layouts of yesteryear, and 'in' is the concept of separation of presentation and content. This led inevitably to the redesign of this site you are viewing now.

Below you will find links to some of the small experiments I've done to test and flex my wings, maybe a tutorial or two, and some useful links to follow along for more information. More will follow as I continue with the site makeover. Come back soon!

HTML4/CSS2 Experiments

Table-less Aligned Form fields

Original Solution

Here's a sample form, with right-aligned field labels, that are not aligned using an HTML table! Yes, that's right; a completely tables-free form layout technique. The reason I used the div-rows initially was as a clearing mechanism for the floats; later on they were kept on the the odd chance I wished to style them further. A third solution is forthcoming that eliminates their requirement as well, however these solutions also illustrate css tricks that can be used in additional circumstances besides forms, thus I keep them here for your enjoyment.

Let's face it; from a maintainer's perspective, when editing the content of:

<div class="row">
    <label for=""></label><input id="">
</div>

it's far easier to find and edit your content when it's not hidden in twice as much markup:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right" valign="top"><label for=""></label></td>
    <td align="left" valign="top"><input id=""></td>
  </tr>
</table>

(I mean, that is obvious, right?)

Oh, the styles? Simple:

div.row {
    clear: both;
    padding-top: 10px;
}
div.row label {
    float: left;
    width: 125px;
    text-align: right;
    letter-spacing: 0.1em;
    font-size: 0.9em;
    padding-top: 0.2em;
    font-weight: bolder;
}
div.row input, div.row select {
    margin-left: 0.5em;
    text-align: left;
}
div.row input {
    width:320px;
}
div.row select {
/* looks ugly if we make it the same width as the rest */
    width: auto; 
}

Updated Solution - Feb 28, 2006

This solution facilitates the removal of the three empty clearing divs previously required in the markup, which served no other purpose than to fix browser bugs. With the three empty <div class="row"></div> gone, we now accomplish this with css instead (with no browser compatibility problems? amazing!):

div.row {
    padding-top: 10px;
    /* these two are what fixes the problem. 
     * http://www.quirksmode.org/css/clearing.html */
    overflow: auto;
    width: 100%;
}
div.row input, div.row select {
    float: left; /* hey, we're still aligned, wow! */
    margin-left: 0.5em;
    text-align: left;
}

Fakeset

This grew from a thought I had following a discussion on the #web support channel on irc.freenode.net, where importance was laid on using the <fieldset> and <legend> tags only within forms, and not elsewhere just to achieve a visual effect. I wondered aloud whether html/css was capable of producing the same effect, and sure enough someone spoke up with some sample code. I played with it a bit until I was satisfied with it, and here you are. Note that this does not work with the current version of Internet Explorer, which cannot understand the :first-child directive, nor the (>) child selector. Hopefully IE version 7 will address this problem, but in the meantime there are plenty of browser alternatives that do work properly.

MapImage

A short foray into attempting to recreate a tables-based small layout exclusively with CSS. Be sure to follow the link back and forth to see the difference between the Before and After samples. It's not perfect, it was only my first attempt, but I like how the numbers overlay the images in the newer version.

Text Inline Nav

A Navbar example using the *exact same html markup* but styling them differently for the sidebar nav and the footer nav.

The best part is, this nav markup can be dual-imported to a *.php file via the <?php include($_SERVER['DOCUMENT_ROOT']."/nav_incl.php"); ?> method, to include the same <ul>-formatted navigation twice.

Is this the new IE7 ? (no, not really)

IE6 supporting CSS2? Is such a thing possible? Apparently so...

Dean Edwards, who may or may not be a genius, has come up with a set of directives allowing Internet Explorer v. 6.x to perform many of the CSS effects that it does not currently support.

Templates and Resources

Skeleton HTML 4.01 Strict Blanks

Here are two 'blank' html files, (Blank is commented, Blank2 is not and is thus more suitable for a skeleton file template for daily use.), that illustrate certain minimum basics required for even an empty file to properly validate. You'll want to either download them for local viewing, or use your browser's view source command to see what we're talking about here.

Skeleton CSS Blank

This is a blank CSS file formatted for use with the @import directive and additionally tweaked with some directives for Vim (using the comment string) to allow it to do some very nifty things that make editing css and html side by side much easier. For example, the folding trick that collapses the css into an outline format, allowing you a better overall view. Below I have a few screenshots showing how vim displays the collapsed css,

There are also a few initial CSS directives that I like to have as defaults, for cross-browser consistency.

Vim css skeleton with css folding example and autosourcing in the blank when opening a new filethis also illustrates other neat vim tricks like sourcing in the css blank automagically whenever you open a new .css file
sample shot of vim css folding in actionhere you can see it in actual use
 

VIM Resources

I've been using Vim as my primary editor, preferring to work directly with the html itself so that (unlike the markup produced by most graphical editors) it can be as clean as possible, and have, over time worked out a number of useful shortcuts for editing. If you're a vim user or would like to try it, you can cadge ideas, mappings and other shortcuts from the vimrc and vimrc.web config files I use currently. Additionally, here's a link to the gvimrc that I use, for you GUI users, even though it's not 'all that'.

I'm currently, as of Feb. 2007, giving my html shortcuts a serious going-over in order to turn it into a filetype plugin instead of importing the shortcuts globally, breaking out the css and php shortcuts into their own respective files, and putting a lot of overall enhancement time into the project. Primarily to ease my own path forward so I can be more efficient, but also from the standpoint of sharing something more functionally useful for others. As you may have noticed, the html shortcuts are far from complete as they are now, and no concession is made towards xhtml functionality (due mostly to the fact that IE6-7 have no XHTML support at all [unless you send it as text/html which defeats the purpose]).

Config Files
vimrc (Last Modified: Aug 03, 2009 10:26am EDT)
gvimrc (Last Modified: Feb 18, 2007 9:47am EST)
Web Shortcuts
vimrc.web (Last Modified: Jan 21, 2007 10:13am EST)

There's an exellent Vim tutorial at vi-improved.org as well, in a conversational style that lends itself well to learning some more of the basics of how to get around, and some of the nifty tricks you can do.

The colorscheme being used in the screenshots above is called inkpot, and was created by ciaranm of the #vim support channel on irc.freenode.net.

Also, the above screenshots show a rather nifty vim trick I devised for folding the css up into outline format. If you look carefully at the leftmost one, you can see the vim 'modeline' that is used at the bottom of the css file in order to enable the trick specifically for that file. This is one reason that I use the skeleton css blank trick, because it ensures that the modeline needed for css-folding will always be present.

500 Colors of HTML

I present to you a decently snazzy HTML Color reference chart for assisting in choosing complementary website colors, that you might find useful for your own endeavors and explorations in color-picking. No I don't think there's only 500 HTML colors available–this is more of a useful subset of colors–think of it as a 'patch of shades'.

Update Sun Jan 29, 2006: I rewrote the script to remove duplicates, as there were several (same name and everything) in the original file, which bring the count down from 738 to around more like 500 or so. I'm still adjusting this, so bear with me for the time being. The original was sorted somewhat haphazardly. I haven't re-sorted it yet, as I'm wondering if there's any sense in doing it programmatically (by number - #000000–#FFFFFF) instead of visually by color. Since they are organized into shades now, doing it by number would break some of those up. Still pondering it. Stay tuned.

Updated again, Mon Feb 12, 2006: Decided to manually revise the order of some of the colors. Excuse the line-numbering at this point, as I haven't quite finished yet, and would rather not shuffle the line-numbers by hand unless I have to.

Links to other sites with more information.

HTML Help

There are many sources of information available on the web for assistance with HTML, but a good many of them (w3schools is a prime bad example) are filled with inaccurate and/or misleading information. When I need to reference some documentation on particular bits of markup, my first stop is HTMLHelp.com.

CSS Zen Garden

You might check out CSS Zen Garden to start, if you're using a browser other than MS Internet Explorer, as this site is a showcase for new and experimental design techniques. It's important to note that as you follow the links to the alternate site designs, the only thing that's changing is the link to the .css file; the content and markup of the website page you are viewing does not change, only the stylesheet!

XHTML Anti-Advocacy

Don't use XHTML unless you understand it. Don't believe everything you hear – Internet Explorer does not understand it, period. Here's why: Sending XHTML as text/html Considered Harmful and HTML and XHTML Frequently Answered Questions.

Why Using Tables for Layout is Stupid

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

See the richly illustrated article at Hotdesign.com

Assorted CSS Samples

Phrogz.net has a nice list of assorted css samples and examples with good explanatory text.

CSS Play

Just found CSSPlay recently, looks interesting, lots of nifty samples.

Humor

If architects had to work like web programmers

A funny article I read somewhere so long ago that I can't remember where it originated.