Styling dates with CSS (Gordonmac dot com)

Styling dates with CSS

by Gordon • Nov 29 2007 • Category: CSS

I have seen similar styling of blog post dates on many blogs, and always thought it was a rather neat way of doing it. Tonight I decided to have a go for myself and discovered that it's pretty darn simple really. All it takes is an image, a few span tags and a sprinkle of basic CSS.

Here's how it's done…

The HTML markup

The average blog post heading contains a few common textual elements; the date of the post, the title of the post, the category which best describes its theme and often the person who posted. With those things considered I decided on the following markup:

<h2>
<span class="date">
<span class="month">
Dec
</span>
<span class="day">
25
</span>
</span> Blog Title 
<span class="meta">Posted in HTML by Gordon Mackay.</span></h2>

Seems like there are quite a few span tags, huh? Well, to do what we want I think that's the bare minimum.

The heading (<h2>) tag makes sense for obvious reasons, here are explanations of the others:

"date" is the wrapper span, and will give dimension to the date box large enough to place the calendar image as its background.
"month" will allow us to keep the name of the month on it's own line and allow us to style it individually.
"day" … for the exact same reasons as month.
"meta" will allow us to place other information on a new line directly under the main title, and also allow us to style it individually too.

Simple stuff really [^.^]

The CSS

The CSS is pretty simple and consists of only four rules. Here is the first one:

.date
{
float: left;
height: 52px;
width: 52px;
background: url(date.png) no-repeat;
margin-right: 10px;
padding-top: 0px;
line-height: normal;
}

This rule moves the span to the right of the parent heading element using a float. It is set to the same dimensions as the calendar image.

Some margin on the right is given to stop the text of the main title from butting up against it, and top padding and line height are reset.

.date .month
{
display: block;
text-align: center;
color: #FFF;
font-size: 11px;
padding-top: 4px;
text-transform: uppercase;
}

This rule places the month on it's own line by forcing it to display as a block level element rather than the inline span that it is. The font size is set to 11px so that we can make it a pixel-perfect fit inside the top date section of the image.

Some padding is given to center it vertically and the text is set to display in uppercase.

.date .day
{
display: block;
text-align: center;
padding-top: 5px;
color: #222;
font-size: 18px;
font-weight: bold;
}

Yep, you've guessed correctly… the day rule does almost exactly the same for the day as the previous rule did for the month.

.meta
{
display: block;
font-size: 11px;
color: #666;
}

The final rule places the post meta info nicely under the larger main title. That's all there is to making your dates look great [^.^]

Browser compatibility

This method works in all common modern browsers on both Apple OS X and Windows (Yeah Internet Explorer 6!!).

Example

You can view the finished product here if you like, and you can also download the files and Fireworks PNG source for the calendar image.

Have fun! ❖

Want to read more?

If you would like to read more of my diaries please visit the archive page.

Search diaries *

Navertech

Based in the Highlands and Islands of Scotland, I work for Navertech which is a leading software company providing products and services to businesses of all sizes and organisations in the UK.

Use the link below to subscribe to the feed you want:

Gordonmac dot com ~ random blethers ~ made in Scotland