Tài liệu CSS Cookbook- P11 pdf

Now it’s time to stylize the dates and add event links in each cell. To reproduce the box

date effect seen in most calendars, place a border to the right and bottom of the text

and float the content to the left.

You want the add event links to be close to the dates. Floating the link to the right

means the link will be positioned next to the date of the following day. By floating the

add event link to the left, you are telling the user that the plus sign (+) means “add an

event for that particular day” (see Figure 9-13):

.date {

border-right: 1px solid black;

border-bottom: 1px solid black;

font-family: Consolas, "Lucida Console", Monaco, monospace;

text-decoration: none;

float: left;

width: 1.5em;

height: 1.5em;

background-color: white;

text-align: center;

}

.addevent {

display: block;

float: left;

width: 1em;

height: 1em;

text-align: center;

background-color: #666;

color: white;

font-weight: bold;

text-decoration: none;

}

Figure 9-13. Styles introduced to the date and add event links

9.10 Sample Design: An Elegant Calendar | 475

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Now it’s time to look at how the event listings can be stylized. Because the previous

links are floated, you need to create a visible break and move the events below the date.

Setting the clear property to both achieves this visual break. The clear property is used

to indicate which sides of an element should not be positioned next to a floated element.

In this case, you don’t want the left side to run next to the date and add event links.

However, just in case the design changes in the future and the dates are positioned on

the opposite side, use a value of both instead of left.

Next, change the display of the link to block and place padding on the bottom (see

Figure 9-14). You’re making these changes to prevent multiple events in a table cell

from running into each other. Also, the padding acts as a nice visual buffer, allowing

the eye to easily discern between two events:

.event {

clear: both;

padding-left: 1em;

padding-bottom: .75em;

display: block;

}

Figure 9-14. Event links treated like block-level elements

476 | Chapter 9: Tables

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

To each table cell, apply a width of 14%. You’re using 14% because 7 (representing the

seven sections of the calendar, or days of the week) goes into 100 (representing 100%

of the viewport) approximately 14 times. Also, place a white border on all sides of the

cell and position all the content to the top with the vertical-align property (see Fig￾ure 9-15).

td {

width: 14%;

background-color: #ccc;

border: 1px solid white;

vertical-align: top;

font-size: 1.2em;

padding: 1px;

background: url(content-bkgd.png) repeat-x;

border: 1px solid rgba(0,0,0,.5);

border-top: none;

}

Figure 9-15. The content in each cell moved to the top

Make the background color of the weekend dates darker than that used for the weekday

dates (see Figure 9-16):

.weekend {

background-color: #999;

}

9.10 Sample Design: An Elegant Calendar | 477

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Figure 9-16. The weekend days marked with a darker gray background color

Slightly gray-out the look of the remaining days in the calendar (see Figure 9-17):

.emptydate {

border-right: 1px solid #666;

border-bottom: 1px solid #666;

font-family: monospace;

text-decoration: none;

float: left;

width: 1.5em;

height: 1.5em;

background-color: #ccc;

text-align: center;

}

Figure 9-17. Empty dates for the next month stylized

478 | Chapter 9: Tables

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

For the current day (in this example the current day is the 27th), place a 2-pixel black

border around the box:

#today {

border: 2px solid black;

}

And with that, the calendar is complete, as shown in Figure 9-18.

Figure 9-18. The current date in the calendar with a darker border

9.10 Sample Design: An Elegant Calendar | 479

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.