Testing jQuery

Tip For more information on CSS3, visit 
http://css3.info/
. 
Create a new file called style.css in the css folder (/public/assets/css/style.css) and add the 
following rules: 
 
body { 
    background-color: #789; 
    font-family: georgia, serif; 
    font-size: 13px; 
} 
 
#content { 
    display: block; 
    width: 812px; 
    margin: 40px auto 10px; 
    padding: 10px; 
    background-color: #FFF; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    border:2px solid black; 
    -moz-box-shadow: 0 0 14px #123; 
    -webkit-box-shadow: 0 0 14px #123; 
    box-shadow: 0 0 14px #123; 
} 
 
h2,p { 
    margin: 0 auto 14px; 
www.freepdf-books.com

---

CHAPTER 4 
■
 BUILD AN EVENTS CALENDAR 
 
156 
    text-align: center; 
} 
 
ul { 
    display: block; 
    clear: left; 
    height: 82px; 
    width: 812px; 
    margin: 0 auto; 
    padding: 0; 
    list-style: none; 
    background-color: #FFF; 
    text-align: center; 
    border: 1px solid black; 
    border-top: 0; 
    border-bottom: 2px solid black; 
} 
 
li { 
    position: relative; 
    float: left; 
    margin: 0; 
    padding: 20px 2px 2px; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    width: 110px; 
    height: 60px; 
    overflow: hidden; 
    background-color: white; 
} 
 
li:hover { 
    background-color: #FCB; 
    z-index: 1; 
    -moz-box-shadow: 0 0 10px #789; 
    -webkit-box-shadow: 0 0 10px #789; 
    box-shadow: 0 0 10px #789; 
} 
 
.weekdays { 
    height: 20px; 
    border-top: 2px solid black; 
} 
 
.weekdays li { 
    height: 16px; 
    padding: 2px 2px; 
    background-color: #BCF; 
} 
 
.fill { 
www.freepdf-books.com

---

CHAPTER 4 
■ 
BUILD AN EVENTS CALENDAR 
 
157 
    background-color: #BCD; 
} 
 
.weekdays li:hover,li.fill:hover { 
    background-color: #BCD; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 
 
.weekdays li:hover,.today { 
    background-color: #BCF; 
} 
 
li strong { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
} 
 
li a { 
    position: relative; 
    display: block; 
    border: 1px dotted black; 
    margin: 2px; 
    padding: 2px; 
    font-size: 11px; 
    background-color: #DEF; 
    text-align: left; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px; 
    z-index: 1; 
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
    font-style: italic; 
} 
 
li a:hover { 
    background-color: #BCF; 
    z-index: 2; 
    -moz-box-shadow: 0 0 6px #789; 
    -webkit-box-shadow: 0 0 6px #789; 
    box-shadow: 0 0 6px #789; 
} 
 
Save the style sheet, and close it; you won’t need to modify it again in this chapter. In the next 
section, you’ll create common files that will, among other things, include these styles into the page. 
www.freepdf-books.com

---

CHAPTER 4 
■
 BUILD AN EVENTS CALENDAR 
 
158 
Creating the Common Files—Header and Footer 
There are going to be multiple pages viewed by your users in this application, and they all need a 
common set of HTML elements, style sheets, and more. To simplify maintenance as much as possible, 
you’ll be using two files—header.inc.php and footer.inc.php—to contain those common elements. 
First, create a file called header.inc.php in the common folder 
(/public/assets/common/header.inc.php). This file will hold the DOCTYPE declaration for the HTML and 
create a head section that contains a Content-Type meta tag, the document title, and links to any CSS files 
required for the document. 
Because the document title will vary from page to page, you’ll be setting a variable—$page_title—
to store each page’s title. 
Also, because more than one CSS file may be needed for a page, an array of CSS file names will be 
passed in a variable called $css_files and looped through to generate the proper markup. 
Inside this file, place the following code: 
 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
 
 
 
              content="text/html;charset=utf-8" /> 
     
 
              href="assets/css/" /> 
 
 
 
 
 
Next, create a file called footer.inc.php in the common folder 
(/public/assets/common/footer.inc.php) to contain the closing parts of the markup. 
For now, this file doesn’t need to do much: it simply closes the body and html tags opened in