updated example files for sticky footer

christinatruong · christinatruong · commit 859158fedc89 · 2014-09-22T10:59:01.000-04:00
diff --git a/project/examples/css/sticky-footer.css b/project/examples/css/sticky-footer.css
@@ -118,22 +118,25 @@ nav a {
 -----------------------------------------*/
 footer {
   clear: both;
+  padding: 5px;
+}
+footer p {
+  margin: 0; /* removes default margin */
 }
-
 /* sticky footer */
 html, body {
   height: 100%;
 }
 .page-wrap {
   min-height: 100%;
-  margin-bottom: -35px; /* equal to footer height */
+  margin-bottom: -35px; /* must be the same height as footer */
 }
 .page-wrap:after {
   content: "";
   display: block;
 }
 footer, .page-wrap:after {
-  height: 35px; /* must be the same height as footer */
+  height: 35px; /* However tall you want the footer to be. */
 }
 footer {
   background: #222;
diff --git a/project/examples/sticky-footer-about.html b/project/examples/sticky-footer-about.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8">
 		<title>Jane Smith | About Me</title>
 		<link href='http://fonts.googleapis.com/css?family=Nixie+One|Open+Sans:300|Pacifico' rel='stylesheet' type='text/css'>
-		<link rel="stylesheet" href="css/exercise8.css">
+		<link rel="stylesheet" href="css/sticky-footer.css">
 	</head>
 	<body>
 
@@ -15,9 +15,9 @@ <h2>Web Developer + City Girl</h2>
 
 				<nav>
 					<ul>
-						<li><a href="exercise8-home.html">Home</a></li>
-						<li><a href="exercise8-about.html">About</a></li>
-						<li><a href="exercise8-contact.html">Contact</a></li>
+						<li><a href="sticky-footer-home.html">Home</a></li>
+						<li><a href="sticky-footer-about.html">About</a></li>
+						<li><a href="sticky-footer-contact.html">Contact</a></li>
 					</ul>
 				</nav>
 			</header>
diff --git a/project/examples/sticky-footer-contact.html b/project/examples/sticky-footer-contact.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8">
 		<title>Jane Smith | Contact Me</title>
 		<link href='http://fonts.googleapis.com/css?family=Nixie+One|Open+Sans:300|Pacifico' rel='stylesheet' type='text/css'>
-		<link rel="stylesheet" href="css/exercise8.css">
+		<link rel="stylesheet" href="css/sticky-footer.css">
 	</head>
 	<body>
 
@@ -15,9 +15,9 @@ <h2>Web Developer + City Girl</h2>
 
 				<nav>
 					<ul>
-						<li><a href="exercise8-home.html">Home</a></li>
-						<li><a href="exercise8-about.html">About</a></li>
-						<li><a href="exercise8-contact.html">Contact</a></li>
+						<li><a href="sticky-footer-home.html">Home</a></li>
+						<li><a href="sticky-footer-about.html">About</a></li>
+						<li><a href="sticky-footer-contact.html">Contact</a></li>
 					</ul>
 				</nav>
 			</header>
diff --git a/project/examples/sticky-footer-home.html b/project/examples/sticky-footer-home.html
@@ -4,16 +4,16 @@
 		<meta charset="UTF-8">
 		<title>Jane Smith</title>
 		<link href='http://fonts.googleapis.com/css?family=Nixie+One|Open+Sans:300|Pacifico' rel='stylesheet' type='text/css'>
-		<link rel="stylesheet" href="css/exercise8.css">
+		<link rel="stylesheet" href="css/sticky-footer.css">
 	</head>
 	<body class="home">
 
 		<div class="page-wrap">
 			<nav>
 				<ul>
-					<li><a href="exercise8-home.html">Home</a></li>
-					<li><a href="exercise8-about.html">About</a></li>
-					<li><a href="exercise8-contact.html">Contact</a></li>
+					<li><a href="sticky-footer-home.html">Home</a></li>
+					<li><a href="sticky-footer-about.html">About</a></li>
+					<li><a href="sticky-footer-contact.html">Contact</a></li>
 				</ul>
 			</nav>
 

Original file line number	Diff line number	Diff line change
`@@ -118,22 +118,25 @@ nav a {`
`118`	`118`	`-----------------------------------------*/`
`119`	`119`	`footer {`
`120`	`120`	`clear: both;`
	`121`	`+ padding: 5px;`
	`122`	`+}`
	`123`	`+footer p {`
	`124`	`+ margin: 0; /* removes default margin */`
`121`	`125`	`}`
`122`		`-`
`123`	`126`	`/* sticky footer */`
`124`	`127`	`html, body {`
`125`	`128`	`height: 100%;`
`126`	`129`	`}`
`127`	`130`	`.page-wrap {`
`128`	`131`	`min-height: 100%;`
`129`		`- margin-bottom: -35px; /* equal to footer height */`
	`132`	`+ margin-bottom: -35px; /* must be the same height as footer */`
`130`	`133`	`}`
`131`	`134`	`.page-wrap:after {`
`132`	`135`	`content: "";`
`133`	`136`	`display: block;`
`134`	`137`	`}`
`135`	`138`	`footer, .page-wrap:after {`
`136`		`- height: 35px; /* must be the same height as footer */`
	`139`	`+ height: 35px; /* However tall you want the footer to be. */`
`137`	`140`	`}`
`138`	`141`	`footer {`
`139`	`142`	`background: #222;`