jQuery 1.4 Animation Techniques - Index of

jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of

02.06.2013 Views

Page 5 Single Page Site Page 1 This is the first page of the site Lorem ipsum dolor... Copyright © Dan Wellman 2010 Page 1 Page 2 Page 3 Page 4 Page 5 [ 191 ] Chapter 7 2. Save five copies of this page, calling them single-page-site-[1-5].html. The CSS used in this example is almost purely to get a feel for the page; it isn't decorative at all. Add the following code to a new file in your text editor: body { margin:0; overflow:hidden; } #outer-container { width:960px; margin:auto; } header { display:block; border:1px solid #000; border-top:none; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-bottom-right-radius:8px; background-color:#fff; } header h1 { margin:0 0 0 20px; float:left; line-height:2em; } header nav { display:block; margin-top:23px; }

Full Page Animations nav ul { margin:0; padding:0; float:right; } nav li { border-left:1px solid #000; padding:0 20px; float:left; list-style-type:none; } nav li:first-child { border:none; } #content { padding-left:20px; } footer { display:block; width:960px; padding:10px 0; border:1px solid #000; border-bottom:none; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; border-top-right-radius:8px; border-top-right-radius:8px; clear:both; background-color:#fff; } footer small { display:block; float:left; margin-left:20px; } footer nav { font-size:12px; } .clear-float:after { display:block; content:"."; clear:both; visibility:hidden; height:0; } .fixed { width:960px; position:fixed; z-index:1; } header.fixed { top:0; } footer.fixed { bottom:0; } #pages { position:relative; } .page { width:920px; position:absolute; } 3. Save this file as single-page-site.css in the css directory. Note that each of the five HTML pages link to this stylesheet. 4. The page will appear like this with no JS functionality added, which is how it would appear were JavaScript disabled on the client: [ 192 ]

Page 5<br />

<br />

<br />

<br />

<br />

Single Page Site Page 1<br />

This is the first page <strong>of</strong> the site<br />

Lorem ipsum dolor...<br />

<br />

<br />

Copyright &copy; Dan Wellman 2010<br />

<br />

<br />

<br />

Page 1<br />

<br />

Page 2<br />

<br />

Page 3<br />

<br />

Page 4<br />

<br />

Page 5<br />

<br />

<br />

<br />

<br />

[ 191 ]<br />

Chapter 7<br />

2. Save five copies <strong>of</strong> this page, calling them single-page-site-[1-5].html. The<br />

CSS used in this example is almost purely to get a feel for the page; it isn't decorative<br />

at all. Add the following code to a new file in your text editor:<br />

body { margin:0; overflow:hidden; }<br />

#outer-container { width:960px; margin:auto; }<br />

header {<br />

display:block; border:1px solid #000; border-top:none;<br />

-moz-border-radius-bottomright:8px;<br />

-moz-border-radius-bottomleft:8px;<br />

-webkit-border-bottom-right-radius:8px;<br />

-webkit-border-bottom-left-radius:8px;<br />

border-bottom-right-radius:8px; border-bottom-right-radius:8px;<br />

background-color:#fff;<br />

}<br />

header h1 { margin:0 0 0 20px; float:left; line-height:2em; }<br />

header nav { display:block; margin-top:23px; }

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

Saved successfully!

Ooh no, something went wrong!