Daily Calendar Dates With CSS


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:

CSS Dates

Final product: view a demo Download Technique

PREPARING THE XHTML

Let’s 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>Lorem ipsum dolor sit amet, consectetur...</p>
     </div>
</div>

Note the .month-09 class to the date div. In most common scenarios this class would come from a CMS or PHP function. This helps 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 float the div with the .date class, display it as a block and apply desired dimensions and font size. Then 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

Simple technique that looks good. 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 ).

Reactions (6)

  1. nice tutorial. thanks for sharing this technique

    You are welcome, im glad you like it :)

  2. Pingback blog.flamingo-style.de» » Kalenderblätter

  3. Good!Maybe you can also do it like this: Join all these icon together Equidistantly into a vertical image,and change its view by setting the background-position.
    The site only load one image by this technique.
    .date {
    float:left;
    display:block;
    font-size:11px;
    text-align:center;
    line-height:45px;
    width:32px;
    height:45px;
    background:url(the mixed image’s url) no-repeat;
    }
    .date.month-01{
    background-position:0 20px;
    }
    .date.month-02{
    background-position:0 40px;
    }
    .
    .
    .
    .

    I try my best to improve my english, Hope you can catch my idea.Thank you!

  4. Great suggestion Joe, definitely one of the best ways to handle these type of situations is with the sprite image technique. I certainly tend to use it a lot for text based Navigation bar with images. Thanks for stopping by!