So I've had the shell of this new design on my HDD for several months and I'm still not sure I've worked out all the kinks. I've decided to catch the remaining bugs -- I'm sure there are many -- and render the finishing touches in public. It seems to be working just fine, but it's possible that something is terribly disfigured in your browser of choice. As always, I appreciate any comments.
Two things worth noting:
The sliding header effect. Resize your browser to see the effect.
As the window gets smaller, the grey portion of the background will slide over the green.
It's pretty simple, really. What you're seeing is the result of two distinct background images.
A grey version of the header, which I've applied to the body
element, and a green version, which I've set as the background
image of this site's h1. The body element's right padding reveals
the grey image, which appears to overtake the green background as the browser window
shrinks.
Most of you, I'm sure, aren't making extensive use of the body element;
some of you won't want to specify right padding (because it affects other content).
An alternative method is to set the grey background on a wrapper div and
specify a right margin on the element/class/id to which you apply the green background.
I've made a quick example of how this might work, with inline styles to make it easier to view source.
I've strived for ultimate markup simplicity. The structure of this document is as follows:
<body>
<h1 title="dionidium.com">dionidium.com</h1>
<h2>Wayne Burkett's Weblog</h2>
<dl id="entries">
<dt></dt>
<dd></dd>
</dl>
<!-- On entries with comments -- >
<dl id="comments">
<dt></dt>
<dd></dd>
</dl>
<div id="menu"></div>
</body>
It's as basic as I can think to make it. h1 for the title of the document.
h2 to start the content. Entries and comments as definition lists.
This structure is only possible because Internet Explorer treats body like any
other div in Standards Mode. Now I'm living on the edge in both of the top
two browsers. Since my documents are still served as application/xhtml+xml to
browsers that support it, like Mozilla, it will, like before, fail miserably if I screw up and
create an entry that isn't well-formed. Internet Explorer won't complain as much, but
non-well-formed content will drop IE into Quirks
Mode, wherein it will helpfully begin treating body as the root element,
stretching it to fill the viewport. It's an ugly sight.
IE is getting its share of hacks. I designed toward Mozilla/Firefox and applied the underscore hack to anything IE rendered in an unexpected way. IE5.x browsers get their own 16-line (including comments) stylesheet, a last-minute effort to make the content accessible to that set of browsers. I don't want to know what this site looks like in browsers older than IE5.x.
As I play with this design, I'm starting to see that I may have to wrap the definition
lists in an extraneous div or resort to less pure markup. I'm getting
unpredictable margins in Mozilla, which occasionally -- not on all entries, but some -- adds
a one pixel margin to the bottom of all dt and dd elements,
despite other explicit style declarations. I don't know how to fix this.
On a side note, all documents are now authored in XHTML 1.0. No more XHTML 1.1.
Dave:
To appropriately handle XHTML 1.1 requires serving two versions of each document: an XHTML 1.1 version to browsers that support
application/xhtml+xmland something else to those that don't. This is because the W3C more strongly discourages serving XHTML 1.1 documents astext/html; they've upgraded the charge to a SHOULD NOT.It was an experiment I see no reason to repeat.
I was waiting for someone to ask, Aaron. Definition lists provide a neat, simple container for the title/body structure of weblog entries.
In addition, there is sufficient evidence that the W3C encourages this usage. See, for example, the HTML 4.0 Specification, in which the W3C suggests definition lists for "marking up dialogues, with each DT naming a speaker, and each DD containing his or her words." Similarly, near the top of that same document the W3C says that definition lists "generally consist of a series of term/definition pairs" but that they "may have other applications." Their examples include separating key points of a fictional marketing brochure and demarcating sections of a recipe.
It's a personal choice, I guess, but I feel comfortable using them for weblog entries, as well.