*Please pardon the un-styled mess why I am rethinking and re-designing my blog!*
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 
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;}
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 ;
}
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 design, Tutorials, Web 2.OH, Web Design
[...] I have re-done this tutorial with unordered lists and css sprites. Check it out [...]
Subscribe by rss, email, or in iTunes!
Jesse says:
What if the user wants to “uncheck” the day? The visited state remains.
May 31st, 2009 at 10:18 am
Niki says:
@jesse
The original intent of the calendar was to show what days a user has viewed of a workout. Checkout the real world application here: http://menshealth.com/yoga/get-started-guide/
May 31st, 2009 at 10:44 am
Jack F says:
Once again is there a particular reason why you didn’t use a table? I’m sure this would qualify as tabular data…but I guess a list is better than all those bloody divs
May 31st, 2009 at 1:06 pm
awesomerobot says:
Yeah, I’m curious of the reason to avoid tables myself. Sure, tables are bad to code an entire site in 1998 style – but if they exist for any reason it would be for something like this.
In general I think the aversion of tables is often more of a knee-jerk reaction, much like the aversion to Comic Sans – which, isn’t necessarily an awful typeface, just a frequently misused one.
Good looking calendar either way.
June 1st, 2009 at 7:26 am
Niki says:
Tables were avoided because in the original project each day was dynamically generated through a CMS and a php for each loop. The loop repeats the LI or the DIV that is floated left.
Not sure if im wrong here, but this could not be done with a table and a TD, as each row would have to be separated with a TR tag. It was much easier to do with an LI or a DIV.
June 1st, 2009 at 7:34 am
Jack F says:
If you knew how many days you wanted on one row, you could use tables, but if not then the li version is best. Thanks for explaining.
June 1st, 2009 at 9:19 am
awesomerobot says:
Ah, ok – that makes a bit more sense knowing how the back-end was functioning. Very snazzy.
June 1st, 2009 at 9:22 am
kovshenin says:
Great! I’d go with jQuery UI though..
June 9th, 2009 at 6:51 am
Brian Cray says:
Beautiful work, thanks for contributing it to the community!
June 9th, 2009 at 7:02 am
Ryan Downie says:
Good work Niki,
Glad you took my advice and went with lists instead of divs.
June 9th, 2009 at 7:09 am
Wynter says:
a:visted ! duh, I forgot that CSS state and right away when I seen your Calender I was like damn, that’s cool (when I clicked and it went gray and checked)
Great little tutorial
June 9th, 2009 at 7:41 am
Ian says:
Should this not be an ordered list as opposed to the unordered list you have used? The elements are there in a particular order (days 1 through to 31 etc.), and I can’t think of a much more suitable situation for an ol.
June 9th, 2009 at 7:59 am
Jon R. Humphrey says:
Love this! Thanks for the interesting take on it!
One thing… you could reduce your css anchor states to only the attributes that change for each; you don’t need to repeat the url, repeat, or block as they will inherit from the a tag.
Thanks for sharing!
June 9th, 2009 at 9:40 am
Mike says:
FYI, if you click on a day and drag off the box, when you release your mouse, the box goes gray and never gets the clicked style or the original.
Firefox 3.0.6/Linux 2.6.26-2.
June 9th, 2009 at 11:09 am
Nacho says:
First of all, I would like to say that this is mega-easy, bearing in mind how many articles we read about css sprites.
Moreover, is really a calendar an ? I don’t think so.
In any case it should be an OL if you are doing this to avoid the tag. Dates have an order.
June 9th, 2009 at 3:48 pm
Nacho says:
(Corrected)
First of all, I would like to say that this is mega-easy, bearing in mind how many articles we read about css sprites.
Moreover, is really a calendar an UL? I don’t think so.
In any case it should be an OL if you are doing this to avoid the tag TABLE. Dates have an order.
June 9th, 2009 at 3:49 pm
M says:
Pseudo code:
for (each day) {
output
if (day is last in week) {
output
}
if (we have more days in month) ¨
output
}
}
June 10th, 2009 at 1:29 pm
M says:
Pseudo code:
for (each day) {
output TD
if (day is last in week) {
output /TR
}
if (we have more days in month) ¨
output TR
}
}
June 10th, 2009 at 1:31 pm