11.28.07
CSS calendar
I recently wrote a calendar control (web site not yet live, so no link) which got me thinking about semantic markup, page layout and CSS. Semantically, a year is a list of months and a month is a list of days. This suggests we should mark up a month as a <ul> with an <li> tag for each day.
A slight complication is that we usually view a month as a list of complete weeks. Months may start mid-week, so the end of the previous month and the start of the next month need to be added to the list. Here’s some sample markup for December 2007.
The list doesn’t look very much like a calendar, so this is where we bring our CSS layout into play. Here are the style rules we need
- We want days to go across the page in rows, so we will use the float:left property for each day.
- There are always 7 days in a week and we want 1-row-per-week, so each day should be 14.2% (ish) of the total width.
- A month can span 6 weeks, so each day should be 16.6% (ish) of the total height.
- The previous month and the next month are not as important as the current month, so we should display them in a different colour. Classes can be added to the list items for this purpose.
You can see the end result here. You will notice the markup is the same as in the previous example, but thanks to the magic of CSS it looks like a calendar.