02.06.2013 Views

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

CHAPTER 4 ■ BUILD AN EVENTS CALENDAR<br />

■ Note Because this book is not about CSS, the rules used won’t be explained in detail. For more information on<br />

CSS, check out Beginning CSS Web Development <strong>by</strong> Simon Collison (Apress, 2006).<br />

In a nutshell, the CSS file will do the following:<br />

• Float each list item to the left.<br />

• Adjust margins <strong>and</strong> borders to make the dates look like a traditional calendar.<br />

• Add a hover effect so the day over which the mouse is hovering will be highlighted.<br />

• Style event titles.<br />

• Add hover effects for event titles as well.<br />

• Add some CSS3 flair, including rounded corners <strong>and</strong> drop shadows, for fun.<br />

■ Tip For more information on CSS3, visit http://css3.info/.<br />

Create a new file called style.css in the css folder (/public/assets/css/style.css) <strong>and</strong> add the<br />

following rules:<br />

body {<br />

background-color: #789;<br />

font-family: georgia, serif;<br />

font-size: 13px;<br />

}<br />

#content {<br />

display: block;<br />

width: 812px;<br />

margin: 40px auto 10px;<br />

padding: 10px;<br />

background-color: #FFF;<br />

-moz-border-radius: 6px;<br />

-webkit-border-radius: 6px;<br />

border-radius: 6px;<br />

border:2px solid black;<br />

-moz-box-shadow: 0 0 14px #123;<br />

-webkit-box-shadow: 0 0 14px #123;<br />

box-shadow: 0 0 14px #123;<br />

}<br />

h2,p {<br />

margin: 0 auto 14px;<br />

155

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!