No, not that kind of dating. Due to popular demand, a quick explanation of the date boxes on this site’s home page.

Whoa. I don’t know what happened, but all of a sudden I’m getting three or four inquiries a day about the little date boxes on this site’s home page, which have been around for, what, a year now? Some want an explanation, others want permission to use them. So this is both at once for my reference and yours.

Markup

Fundamentally, only two HTML elements are needed to pull this off. One container, and an additional element to surround the day. In my case I’ve opted for spans. (You could add a link, but I haven’t because I only just now thought that might be a good thing to have.)

<span class="calPage">
Jun
<span class="day">8</span>
</span>

You may prefer different markup; I’m sure there are a thousand interpretations out there of the best or most semantic way to represent a date in HTML. Of particular note is a microformat called hCalendar which, taking my best shot, might look something like this:

It’s doubtful whether this is an appropriate use for hCalendar though. I’m sure someone will clarify in the comments.

CSS

Anyway. So now that we have some basic HTML to work with, the CSS needs to do its thing. Making use of Sliding Doors and a couple of strategic images, the container span gets the top edge, the date container gets the bottom, and both are set to display: block; and constrained to a fixed pixel width to make it work. Plenty of font styling later, and this is what you have:

Because the markup is so thin, the complexity has been moved to the CSS. I’m not going to explain the basic font formatting or box model in any detail, since that’s more or less copy-and-paste-able. What does need a bit of explanation is the positioning.

These dates are placed with absolute positioning, not floats; this is probably why some have been having trouble figuring them out. The positioning is based on the parent elements which contain the dates, because those have been positioned as well.

A quick refresher on this concept is over at Stopdesign, Making the Absolute, Relative. Basically, the parent element (in this case, <div class="post">) is given the position value position: relative;, but not actually positioned with top or left values. The sole reason for doing this is so that when I later absolutely position the dates, they don’t start positioning from the top left corner of the page, they start from the top left corner of the container block, which is div.post.

Movable Type

And because it’s also been requested, here’s the Movable Type template code to have it generate these:

Permission

So here’s my permission to use this date formatting for whatever purpose you wish. You’ll want to create your own images, because the background images I use (1, 2) blend in with this site’s slightly off-white background; they won’t do much on a white background. But otherwise, feel free to play with the markup and CSS in this article, and re-use it elsewhere.

I was considering a similar sort of design for a future redesign, not as much with positioning but instead the best way to achieve those rounded edges. I was playing around with the sliding doors technique when I saw a imageless CSS/DOM/Javascript technique, Nifty Corners [http://pro.html.it/esempio/nifty/].

Personally, while I’d like to drop images and possibly any extraneous tags necessary to use the images, the javascript looks not a whole lot cleaner. Ever considered it?

I came to mezzoblue today to see if I could figure out how you did the date boxes and low and behold an article on it… Coincidence? I have read your book and can say it’s the only techie book I have ever read cover to cover. Normally I only buy books for reference but the Zen Garden has inspired me an completely changed my way of thinking. It’s hard to break old habits but I’m working on it. Thanks for the date code.

Tommy > It may have been because Dave doesn’t really consider a date to be a “block” of information (you usually display dates inline, not as blocks). Using spans is therefore more logical from a markup standpoint, and if he ever feels the need to change his design he’ll have “logical” markup to work with and to style.

I use MT and it also doesn’t work properly. I can get only one date image to appear per page, which means only one entry has a date next to it. The rest of the entries appear date-less. Any ideas why this happens and how to fix it?