Here's the complete text of the entry you were just reading. To return to the whole blog, click the Blogolalia button at left.

August 14, 2004  

css overhaul

Hand-in-hand with cleaning up the site was an overhaul of the Waldo css, which had become a bit...cumbersome ;-) The basic two-column layout was retained, but without the messy hacks (Tantek box-model, etc.) — pushin' electrons is so much simpler with robust, viable alternatives to Explorer! Here's some of the nitty-gritty:

The layout is meant to be zero- or low-graphic, with visual color coming from links, heads, and a couple of block classes, and textual color coming from content face, weight, and leading. (For instance, the large navigation "buttons" are purely text-based; no graphics, no pre-loads, easy editing.) Full justification dramatically reduces "text rivers."


The "static" navigation area on the left is achieved with the rule body>div#linkbar {position:fixed;}. Using a child relationship in this rule seems to successfully bypass IE/Win's inability to handle fixed positioning; the box floats fine in IE; it just scrolls away. Only a bit of minor breakage occurs in other browsers, such as IE5.x/Mac not producing hilites when links are hovered. Very liveable.

To give content text a good "flow," the usual attention has been paid to vertical spacing and headline style. While not perfectly implemented, the pages scale remarkably well, whether users are adjusting window size, font size, or both. There's talk of breaking the main sheet up into two or three separate sheets, to make color and face changes easier...we'll see. Here's the basic elements, and descriptions of the rules that style them:

 

 

Each page is headed by a summary/introductory paragraph of class intro; this class sets a wide colored border left of its text, like a fat vertical rule.

Content

Content is headed by an H1, stretching a colored background across the content area. (<H1>s make great horizontal rules, too -- just wrap one around a &nbsp; and there you go.) Page content is composed as one or more blocks of head/text.

<address> blocks are styled to make "pullouts." Borders at top and bottom provide horizontal rules, and the block is floated right at 50% width. Text is aligned ragged left, and is a bit larger than body text.

Body text is set up to run with <p> as the "normal" block; textual color and organization are provided by the <blockquote>, <address>, and <ul|ol|dl> tags.

<blockquote> blocks provide focus in large streams of body text. Text is left-indented, and set ragged left for distinction. A slight right margin maintains textual color.
A more-distinct blockquote using the side class. Still left-indented, and set ragged left for distinction; a left border forms a gutter.

Lists are primarily ULs and DLs; leading is a bit tighter than body text, and items are justified left-ragged with a reduced right margin:

Definition lists....
are set up just like ULs. In production sheets (but not here) DT elements getting bold font weight; they're good for subject : description information.
DD elements can be used like <P>s within lists.

Some folks just gotta be quoted!

And so, those folks get their wish...sigh... Big type, big rules, big spacing, big deal.

Subheads

Content subheads are provided by two classes of <h3>. A normal H3 sets up a bit large; bold; underlined. Looks good over paragraphs and blockquotes. H3 gives itself some breathing room with 18px of top margin; it stays tight to its material with 4px bottom margin.

Here's an H3 of class "plain"

A "plain" H3 sets up a bit large, with no underline. Looks good over paragraphs and blockquotes. H3 gives itself some breathing room with 18px of top margin; it stays tight to its material with 0px bottom margin.

The other heads are used for "special effect" :

  • H2 sized to fit its graphic, shoved right, and letter-spaced for textual color.
  • I'm so pretty...

  • H4 is used solely for blog entry dates:
  • July 14, 2003

  • H5 is good for heading lists:
  • Here's an H5
  • H6 is H5 without indenting
  • Here's an H6 atop a <p>

    Looks good atop a paragraph. Sometimes you just don't wanna mess with side-margins, right?

    Here's an H6 in a <blockquote>
    Looks good inside a blockquote, too. Sometimes you just don't wanna mess with side-margins, right?