Hot Dates with CSS

Posted on July 3, 2006.

Update July 9, 2006: As per the suggestions in the comments, I've updated this demonstration. The markup is now much more semantic.

It might be hard to believe that CSS can get you hot dates, but listen up and I will explain how.

I've been working on a new site and this site includes a blog. I decided that simple text dates wouldn't be enough for this design, and looked into making those neat little "calendar-like" date blocks that you see next to entries on blogs. A perfect example would be veerle's blog.

The first step in making these dates was to generate the right markup. I use the following code within "the loop" in Wordpress to build the markup I need:

<?php 
     $time = get_the_time('M d');
     list($mo, $da) = explode(" ", $time);
?>
<acronym class="published" 
  title="<?php the_time('Y-m-d\TG:i:sO'); ?>">
     <span class="pub-month"><?php echo($mo); ?></span>
     <span class="pub-date"><?php echo($da); ?></span>
</acronym>

This code could probably be done better, but it's what I know. Credit goes to all the commenters who suggested the following markup, which goes along somewhat well with the Microformats date-time-design pattern:

<acronym class="published" title="2006-June-28">
    <span class="pub-month">Jun</span>
    <span class="pub-date">28</span>
</acronym>

Note: the title is actually more complex than that.

Then it's just a matter of applying the right CSS to get nice dates. See the CSS in action at my lab.

Digg this entry

Get a trackback link

13 Trackbacks/Pingbacks

Pingback: Weblog Tools Collection » Hot Dates with CSS on July 4, 2006
Pingback: andy brudtkuhl » Blog Archive » links for 2006-07-06 on July 6, 2006
Pingback: Netstone studios » Blog Archive » Calender-like dates in wordpress on July 10, 2006
Pingback: The Sunday Slice: A Day Late at Low End Theory on July 11, 2006
Pingback: Hot Dates Plugin for Wordpress · supriyadisw dot net on July 14, 2006
Pingback: Dailylife @ turtelina.net » Blog Archive » Purple Turtle on July 15, 2006
Pingback: Zomaar » Blog Archive » Fine-tuning layout (2) on July 30, 2006
Pingback: Fechas mÃ¡s elegantes con CSS - aNieto2K on September 30, 2006
Pingback: Christian Montoya » Waiter, this tag soup tastes like trash! on October 11, 2006
Pingback: Aggiornamento grafico: versione 1.5 - TomStardust.com on October 29, 2006
Pingback: esta2.com » 16.11.06 » Fechas de los posts en forma de calendario on November 16, 2006
Pingback: Hot dates on the web | The Montoya Herald on January 23, 2007
Pingback: Wordpress Utilities Plugin | blog.critical on March 25, 2007

22 Comments

Dennis on July 3, 2006

Chris this is great stuff! I Digg!
Alan Orozco on July 3, 2006

Great article! I'm digging it and adding to my del.icio.us
Derek Punsalan on July 4, 2006

You could use a definition list:
<dl>
<dt>Month</dt>
<dd>Day</dd>
</dl>

Of course the CSS is what would complete the magic.
Noah Tye on July 4, 2006

Dave Shea (mezzoblue.com) has also documented the way he does his date boxes on his website.

Derek: Isn't that improper use of definition lists? The 'day' does not define the 'month', does it? Of course, the code is easier on the eyes, merely less semantic.
C Montoya on July 4, 2006

Noah beat me to it; A definition list is clean, but not so semantic. I know the div with p's looks heavy, but I specifically wanted to use classes since they provide a little bit of semantic value.

And Dave Shea's tutorial was one that I saw before writing this; it's not so scalable like the ones I made but still a very good example.
z720 on July 4, 2006
About semantic and markup, wouldn't it be better to use span within a p.
```
Jun
28
```
So it would degrade on a single paragraph without style applied (mobile, search engine…)

Anyway great tutorial.
C Montoya on July 4, 2006

Not really. The semantics is really in the classes here, there isn't much difference between "p" and "span." But it's definitely worth considering, and probably would appear better on devices with poor CSS support. You could definitely replace the "p" tags with "span" and just use display:block to get the same result.
Dave Scriven on July 5, 2006

What about using
<abbr title="YYYY-MM-DDThh:mm:ss.sTZD">
Month
Day
</abbr>

Microformats make use of this format I think? Very good idea for the web because we get to keep the machine-readable date and our month/day is just an abbreviation of the larger date. What do you think?
Christian Watson on July 5, 2006

Thanks for the useful post! If your readers are looking for some good examples of calendar-like dates, they might want to try my typography for headlines showcase, which has a number of blog headlines that show the date in this way.
Heiko on July 6, 2006

I would prefer span too, because post-month & post-date are no paragraphs. But none the less it is a very nice short "Date-Tutorial" Christian.
Richard5 on July 6, 2006

Looks really nice these calender based dates. I myself have choosen for a kind of post-it look for the date in my blog. It's a simple dive with a yellow post-it like image as backgound with 3 divs in it to format date month name and year. I really like this date formatting, much nicer than having just a line describing the post date!
C Montoya on July 6, 2006

Dave: If that is a microformat then it's much better than my example. I just need to see the microformat site and find it.
Dave Scriven on July 6, 2006

The specific example you're working on isn't a microformat as such but take a look at http://microformats.org/code/hcalendar/creator and see how the dates are handled.

I only thought that it might apply to this idea too that's all. so div > p > abbr > span is a little longer but is it more semantic? A paragraph with a date abbr but keeping the machine readable date as the title. I might be well off the mark here - just some thoughts that came up.

Didn't mean to confuse and say it was a microformat
Nicola on July 7, 2006

Great stuff, I've added dates to my blog posts, and I like it very much. Thank you for sharing this article. Regards from Italy
Zeo on July 7, 2006
I agree with Dave's idea by using span instead of p.

You could read datetime-design-pattern on Microformats wiki or use the below WordPress datetime format code.
```
<abbr class="published" title="<?php the_time('Y-m-d\TG:i:sO'); ?>">
 Month Day
</abbr>
```
C Montoya on July 7, 2006

Dave & Zeo: That looks right, I'll update the example when I get a chance. Thanks.

Nicola: Nice job, the dates on your blog look great.
bruce on July 15, 2006

Splendid bit of baffling PHP magic. I wrapped it in a rather than an acronym, though.
endunham on July 24, 2006

Thanks for a great tutorial!
I wrote about this in addition to "Hot Dates" plugin in my blog for Japanese WP fellows.
Pauly on July 31, 2006

Hi, linked to this a while ago, just a note to say I started implementing it today! I like the change to "acronym" too.
Christian Montoya on October 11, 2006

Glad you guys liked it
Paul Armstrong on January 24, 2007

Looking back on this, the acronym tag seems to be used incorrectly, as an acronym is "a word formed using the initial letters of other words. An abbreviation (abbr) would be more correct, semantically, as it is "a shortened version of a word or phrase".
Christian Montoya on January 24, 2007

Paul, I'm pretty sure that somewhere along the way I said something about how acronym is used in place of abbr because IE doesn't support abbr. Either I said it or the Microformats site said it. It's very unfortunate but the way it has to be done. Anyway, if people want they can just use span and keep things clean.

The Montoya Herald, a weblog about Blueprint, jQuery, design, music and life, publishing on the web since September 2005. Written by Christian Montoya: developer, designer and entrepreneur.

Things I Do

Supported By

Like What I Do?

On this domain

Elsewhere