Styling an Events Calendar
Project 3
Although they aren't common, it's surprising just how useful events calendars can be on the Web. A personal site might use one to indicate when a web log was updated or to show important dates in history. Even more interesting, an organization or community could use a calendar to publicize upcoming and recurring events.
In this project, we'll look at the basic structure of Web-based calendars, explore ways to set the borders between days, and discuss how the days should be classed and identified to give us the most flexibility for later styling. This gives the reader an introduction to making CSS and table work together, and directly styling table elements as well as their contents.
Errata
- Page 60
-
The last sentence of the second paragraph in the section "Creating the Grid" should read: "Therefore, inside the table, the borders between cells add up to be 2 pixels thick, whereas the ones along the outside are only 1 pixel thick."
- Page 71
-
In the two code blocks on this page, the rule for
div.date
appears prematurely. Thediv.date
rule is first introduced on the next page, in the section "Cornering Our Dates." The two code blocks on page 71 should have read:div.event {margin: 0.5em;} div.event span {display: block;} </style> div.event span {display: block;} span.time {font-weight: bold;} span.loc {color: #555; font-style: italic;} </style>
- Page 73
-
Figure 3.18 is incorrect when compared to the code in project file
ch0318.html
. The dates in the Saturday column should look the same as those in the Sunday column, instead of maintaining the white boxes around the numbers. This was due to a typographical error in the project file code that has since been corrected. - Page 74
-
The comment
/* changed the color from #AAB" to "gray" */
should read/* changed the color from #BBB" to "gray" */
.