TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Dating Requests

June 10, 2005

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:

<span class="vevent">
  <a href="/archives/2005/06/08/simple_templ/" class="url">
    <abbr class="dtend" title="20050608">
      Jun <span class="day">8</span>
    </abbr>
  </a>
</span>

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:

.calPage {
	display: block;
	font-size: 10px;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	text-shadow: #fff 1px 1px 1px;
		// only safari renders text-shadow
	color: #BDBDBD;
	background: url(/i/ice/deco-date1.gif) 
		0 0 no-repeat;
	margin-top: 0;
	width: 35px;
	padding-top: 5px;

	position: absolute;
	top: 20px;
	left: -40px;
}
.calPage .day {
	display: block;
	font-weight: bold;
	font-size: 20px;
	letter-spacing: -2px;
	text-indent: -3px;
	text-shadow: #bbb 2px 2px 0;
	color: #ddd;
	background: url(/i/ice/deco-date2.gif) 
		bottom left no-repeat;
	padding-bottom: 5px;
}

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:

<MTDateHeader>
  <span class="calPage">
    <$MTEntryDate format="%b"$>
    <span class="day">
      <$MTEntryDate format="%e"$>
    </span>
  </span>
</MTDateHeader>

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.


AkaXakA says:
June 10, 01h

Nice article.

Note about the markup though: The extra ‘day’ class isn’t needed here. You could just leave it out and then use ‘.calPage span’, as it’s the only span within the .calPage.

Rest of the code is tight though. :)

Adam says:
June 10, 01h

They are very nice little date boxes, thanks for the article and the permission :)

Oliver says:
June 10, 01h

That is very sweet. They look very much like the real calendar dates. Hm.. this may lead to a very interesting design project of a calendar.

June 10, 03h

I do like snipets of code. All code should be released as snippets. Then you can create your own system to meet your needs. Rather than, the box contains everything game.

June 10, 09h

They are nifty little boxes considering how they provide some accessibility over using a dynamic image (perhaps generated via PHP).

Are you sure you are subliminally asking for people to ask you out on a date? Or is there someone you want to ask out? Wait, that’s off topic and personal…

June 10, 10h

Great article. I like your explanation of making the absolute relative, as it is somewhat complicated, and you said it well.

I’m sure we’ll see these pop up all over the web soon. Thanks for your permission.

(Silly me, I thought I’d submitted my comment instead of previewing it…)

June 10, 11h

As a CSS-newbie, I very quickly became frustrated with floats and wherever possible I do the relative-absolute trick.

Floats have been relegated to a) column behaviour and b) reflowing thumbs. (but once inline-block has broader support, even that will have a better alternative…)

Anyhow, I’ve always liked those little calendar boxes. It’s a great way to turn something long and skinny into something compact.

June 10, 11h

I laughed when I saw the title of the article in Firefox’s live-bookmark… then I saw the description.

The way the dates are formatted on the front page is actually what caught my eye the most when I first saw mezzoblue. When I first saw them, they looked even like images to me.

It’s a really neat and creative trick, yet it seems so simple once you find it out.

9
Tommy says:
June 11, 03h

Hi! Thanks for the permission and the trick. I have only one question, as I am trying to learn CSS. Why did you use span with display:block, instead of div’s that are block to start with?

-Thanks-
Tommy

June 11, 09h

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?

11
Bill Hamilton says:
June 11, 12h

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.

June 12, 02h

sorry, i never noticed them, i’ve been looking and reading thinking “what date box”, the contrast is too low, maybe you should make them stand out more.

firefox 1.0.4 win Xp sp1

Adrian D. says:
June 12, 03h

Yes very nice little date boxes :)

“Making the absolute relative” seems to be a technique that’s popping up more and more. I too think you explained it well. The technique defintely beats floats. Heh, anything beats floats :)

>>The extra ‘day’ class isn’t needed here

Yes it is. Without it you end up with unobvious rules in your CSS that can make things harder to maintain.

14
Masklinn says:
June 12, 03h

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.

In a nutshell, Dave chose to markup logically and style… stylishly.

Dave says:
June 14, 06h

Ah love it! Amazing article and you explained absolute relative. Not an easy take by any stretch of the imagination.

16
Johan says:
June 14, 07h

As seen on <”>http://www.snook.ca/archives/000372.html>

I like the comments design a lot.

It is playfull, with the comments’ name , date of entry, next to the comment itself.

Check it out.

Caleb says:
June 17, 11h

Are you sre the MT code is right? I had trouble geting it to work. It would not post the month.

kadavy says:
June 19, 08h

Wow! And here I had always assumed those were just dynamically generated images.

Renee says:
June 24, 11h

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?

Usayd says:
August 27, 05h

Thanks :)

Kate says:
January 19, 23h

Making the absolute relative” seems to be a technique that’s popping up more and more. I too think you explained it well. The technique defintely beats floats. Heh, anything beats floats :)

Trevor says:
February 14, 14h

Those boxes look like the real calendar dates. Thanks for the CSS!

Iris says:
March 21, 15h

Someone commented: “The success rate is extremely low for online dating.”

Care to define success rate? The author seems to be content.

Yes, I’m J. Random Netizen. A guy who just dropped in after seeing language being abused just to “prove” a point. I guess *that’s* my pet peeve.

For today.