Design Calendar with CSS

css| Calendar | design

Table element

If you've seen my code, you'll find that my calendar is made with a table. Yes, because table column data is displayed in the calendar, so it's reasonable to use a table layout. It is not appropriate to use a table to make the entire site, but we can definitely use the table in the list data. Like calendars, program tables, charts, schedules, we can make them with table. Also imagine that if you don't have a reference to CSS, floating objects and absolutely positioned objects with CSS will make the page a mess. In fact, I was trying to make a calendar without a table when I was in a state of CSS layout mania. Believe me, this is going to be a lot of headaches in the end because you have to consider all the different browser compatibility and debug. It was a waste of time, but luckily I came;--)

Molly Holzschlag wrote a very good article "semantic meaning" ("The Meaning of Semantics")

Design Calendar

Everyone has their own custom design steps, and I first use Photoshop to design the page. After you have determined the color style, edit the code with Cssedit and BBEdit. In this calendar, use only one GIF picture, XTHML and CSS code as follows:

#calendar {
width: 141px;
padding: 0;
margin: 0;
border-left: 1px solid #A2ADBC;
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #616B76;
text-align: center;
background-color: #fff;
}

We use the ID selector to name the calendar and make the necessary attributes such as width,padding,... Wait a minute. If the entire page has only one talbe, it can also be written in the Table tab.

td {
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
width: 20px;
height: 20px;
text-align: center;
background: url(images/bg_calendar.gif) no-repeat right bottom;
}

We also want to define the cell TD label for the table. I defined a left border for table and defined a right and bottom box for each TD. Of course there are other ways beyond this definition.

td a:link, td a:visited {
color: #608194;
background: url(images/bg_calendar.gif) no-repeat;
}

td a:hover, td a:active {
color: #6aa3ae;
background: url(images/bg_calendar.gif) no-repeat right top;
}

There is only one picture in the calendar, 3 different backgrounds in three different locations of the pictures that define the background in the CSS, and several styles define the calendar month navigation and the current date.

* View CSS

* View Calendar

Add more Affinity Code

Some of the elements in tables can help readers of a screen reader to read more easily, such as adding a property summary to your code. Want to learn more table affinity articles preferred Roger Johansson 's "Drill-down table" (Bring on the tables )"

Added some abbreviated attributes (ABBR) that are necessary for reading on a screen reader in my calendar. To explain the Sunday "S", the Monday "M", the Tuesday "T" and so on. But I don't understand, abbreviated attribute (ABBR) is the abbreviation of the content, and I use in the calendar is exactly the opposite (translator note: The author uses abbr = the "Sunday" attribute explains the meaning of "S". So I want to know if I'm doing the right thing. Please tell me if you know the correct wording, thank you;

Original Address: Veerle ' s blog Translation: wx2.org