A few weeks ago I wrote a tutorial explaining how I coded a calendar for a client project at my day job (Brunello Creative). After some comments from readers I realized that wrapping a link around an h3 element wasnt semantic! eeeek! I also realized that I probably had a case of div-itis. So heres a re-take of the calendar that validates! wooo! oh and then there’s the css-sprite thing!

For the lazy ones out there you can just go ahead and view the example and download the source code :)


Basic Markup & Layout

My previous version of this calendar involved a lot of divs. While this made sense to me at first this calendar really seemed more like a list. I originally avoided lists because…well i just get frustrated with them (especially with cross browser issues). Check out the basic markup of each day:

<li class=”day”>
<h3><a href=”calendar6.html#1″>1</a></h3>
</li>

And the blank days at the beginning and end of the calendar are just empty list items:

<li class=”blankDay”>
</li>

And the css that makes the lists do their work. First we we get rid of the default margin and padding on unordered lists. Then we set the height and margins and floats on our list items via a .day class and a .blankDay class. We also add display:inline becauseof the IE6 double margin bug.

ul {
padding: 0px;
margin: 0px;
}

.day {
width:105px;
height:105px;
overflow:hidden;
display:inline;
float:left;
margin-right:1px;
margin-top:1px;
}

.blankDay {
background:url(sprite-bg.gif);
background-position:0px 0px;
background-repeat:no-repeat;
width:105px;
height:105px;
margin-right:1px;
margin-top:1px;
overflow:hidden;
display:inline;
float:left;

}

CSS Magic! It’s all in the link states.

Now – all the magic lies in the css applied to the link states. Currently with out the magic of javascript the link element is the only one that allows the psuedo class of :hover. I’ve also added some padding within the link. This helps gives the H3 day number element a bit of space to breathe.

a {
width:95px;
height:100px;
padding-right:10px;
padding-top:5px;
background:url(sprite-bg.gif);
background-position:0px 0px;
background-repeat:no-repeat;
text-decoration:none;
display: block;
color:#982302;

}

a:hover {
background:url(sprite-bg.gif);
background-position:0px -105px;
background-repeat:no-repeat;
display: block;
color:#ffffff;
}

a:active {
background:url(sprite-bg.gif);
background-position:0px 0px;
background-repeat:no-repeat;
display: block;
color:#ffffff;
}

a:visited {
background:url(sprite-bg.gif);
background-position:0px -210px;
background-repeat:no-repeat;
display: block;
color:#7f7e7e ;
}

CSS Sprites…oh my!

I’ve also used a popular technique called CSS-Sprites. Instead of having the server go and get 3 different images for the hover states I combined them into 1 image and positioned the background images to show the corresponding image. Pretty simple and amazing technique!

Throw it all togther and you have yourself a calendar that is semantic and validates! woohoo! Check out the live example and download the source code. Leave a comment and let me know what you think!


[19] Comments
Posted in Tutorials, Web 2.OH, Web Design, design