Matt Varone - Creative Designer

— Now that I released the calendar icons set I thought of sharing the CSS technique I use to display dates within the calendars. This practice is seen mostly across blogs and news articles sites. We have specific images for each month so the technique is pretty simple, let’s start with the base XHTML:

PREPARING THE XHTML

I’m gonna simulate we are doing this for a blog:

<div class="post">

     <div class="date month-09">10th</div>
     <h2>This is my Post Title</h2>        

     <div class="entry">
             <p>&amp;amp;amp;mdash;  Lorem ipsum dolor sit amet, consectetur...</p>
     </div>

</div>

Note that I added a .month-09 class to the date div. In most common scenarios this class would come from a CMS or PHP function and eventually help to style the div with the correct month background image:

The CSS

.date {
    float:left;
    display:block;
    font-size:11px;
    text-align:center;
    line-height:45px;
    width:32px;
    height:45px
}

.date.month-01 { background: url(images/jan.gif) no-repeat 0 0 }
.date.month-02 { background: url(images/feb.gif) no-repeat 0 0 }
.date.month-03 { background: url(images/mar.gif) no-repeat 0 0 }
.date.month-04 { background: url(images/apr.gif) no-repeat 0 0 }
.date.month-05 { background: url(images/may.gif) no-repeat 0 0 }
.date.month-06 { background: url(images/jun.gif) no-repeat 0 0 }
.date.month-07 { background: url(images/jul.gif) no-repeat 0 0 }
.date.month-08 { background: url(images/aug.gif) no-repeat 0 0 }
.date.month-09 { background: url(images/sep.gif) no-repeat 0 0 }
.date.month-10 { background: url(images/oct.gif) no-repeat 0 0 }
.date.month-11 { background: url(images/nov.gif) no-repeat 0 0 }
.date.month-12 { background: url(images/dec.gif) no-repeat 0 0 }

The CSS above is pretty clear, first I float the div with the .date class, display it as a block and apply desired dimensions and font size. Then, as mentioned before, I assign the correct background image based on the month number class.

WORDPRESS

If you are using WordPress you can use the_time() function to get the correct date and month to display:

<div class="post">

        <div class="date month-<?php the_time('m'); ?>"><?php the_time('dS'); ?></div>
        <h2><?php the_title(); ?></h2>

        <div class="entry">
            <?php the_content(); ?>
        </div>

</div>

Conclusion

And thats it! Simple technique that looks good. I hope you find the article useful, Cheers!

This technique has been tested in: IE6, IE7, Firefox 3 ( Mac/PC ), Google Chorme ( Win ) and Safari ( Mac/PC ).