Christian Montoya

Hot Dates with CSS

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.

You too can have hot dates with CSS.

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:

1
2
3
4
5
6
7
8
9
<?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:

1
2
3
4
<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

Thank you for reading • Published on July 3rd, 2006 • Please take a moment to share this with your friends

Previously:

More recently: