Skip to content

Commit 44ad6d8

Browse files
christinatruongchristinatruong
committed
Moved sticky footer to "homework". Small content revisions overall.
1 parent 959070c commit 44ad6d8

File tree

3 files changed

+200
-100
lines changed

3 files changed

+200
-100
lines changed

‎framework/extras-referencing-css.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757

5858
This method is preferred over *inline* css, however it is still inefficient because if you had multiple web pages, the style block and any revisions would have to be replicated on every single page.
5959

60-
The **external** method is most widely used. Refer back to the original presentation [here](../index.html#slide41).
60+
The **external** method is most widely used. Refer back to the original presentation [here](../index.html#slide40).
6161
</section>
6262
</main><!-- cls main section -->
6363

‎framework/extras-sticky-footer.html

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<title>Ladies Learning Code: Intro to HTML & CSS</title>
7+
<!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
8+
<link rel="stylesheet" href="css/slideshow.css">
9+
10+
<!-- Theme-specific styles -->
11+
<link href='http://fonts.googleapis.com/css?family=Quicksand|Pacifico|Open+Sans:400,300' rel='stylesheet' type='text/css'>
12+
<link rel="stylesheet" href="css/font-awesome.css">
13+
<link rel="stylesheet" href="css/highlightjs-themes/monokai.css">
14+
<link rel="stylesheet" href="css/theme-llc.css">
15+
<link rel="shortcut icon" href="img/favicon.ico">
16+
17+
<!-- Workshop-specific styles -->
18+
<link rel="stylesheet" href="css/workshop.css">
19+
20+
<!-- Takes care of CSS3 prefixes! -->
21+
<script src="scripts/prefixfree.min.js"></script>
22+
</head>
23+
24+
<body>
25+
26+
<base target="_blank">
27+
28+
<main>
29+
<section class="slide" data-markdown>
30+
##Create a Sticky Footer
31+
32+
We'll be following these instructions: http://css-tricks.com/snippets/css/sticky-footer/
33+
34+
First, we need to create a page wrapper around the page content only, not the footer content. The home page HTML will look like similar to this:
35+
36+
```
37+
&lt;div class=&quot;page-wrap&quot;&gt;
38+
&lt;nav&gt;
39+
...
40+
&lt;/nav&gt;
41+
42+
&lt;header&gt;
43+
&lt;h1&gt;Jane Smith&lt;/h1&gt;
44+
&lt;h2&gt;Web Developer + City Girl&lt;/h2&gt;
45+
&lt;/header&gt;
46+
&lt;/div&gt;&lt;!-- close .page-wrap --&gt;
47+
&lt;footer&gt;
48+
...
49+
&lt;/footer&gt;
50+
```
51+
52+
The about and contact pages will look like this:
53+
54+
```
55+
&lt;div class=&quot;page-wrap&quot;&gt;
56+
&lt;header&gt;
57+
&lt;h1&gt;Jane Smith&lt;/h1&gt;
58+
&lt;h2&gt;Web Developer + City Girl&lt;/h2&gt;
59+
60+
&lt;nav&gt;
61+
...
62+
&lt;/nav&gt;
63+
&lt;/header&gt;
64+
&lt;/div&gt;&lt;!-- close .page-wrap --&gt;
65+
&lt;footer&gt;
66+
...
67+
&lt;/footer&gt;
68+
```
69+
</section>
70+
71+
<section class="slide" data-markdown>
72+
##Sticky Footer CSS
73+
74+
```
75+
/* sticky footer */
76+
html, body {
77+
height: 100%;
78+
}
79+
.page-wrap {
80+
min-height: 100%;
81+
margin-bottom: -35px; /* must be the same height as footer */
82+
}
83+
.page-wrap:after {
84+
content: "";
85+
display: block;
86+
}
87+
footer, .page-wrap:after {
88+
height: 35px; /* wowever tall you want the footer to be */
89+
}
90+
footer {
91+
background: #222;
92+
color: #ccc;
93+
}
94+
```
95+
</section>
96+
97+
<section class="slide" data-markdown>
98+
##One more update
99+
100+
Let's revise the CSS for the paragraph in the footer.
101+
102+
```
103+
footer {
104+
clear: both;
105+
padding: 5px; /* adds space inside the footer */
106+
}
107+
footer p {
108+
margin: 0; /* removes default margin from paragraph */
109+
}
110+
```
111+
Compare your page with this [example](../project/examples/sticky-footer-home.html).
112+
</section>
113+
114+
</main><!-- cls main section -->
115+
116+
<footer>
117+
<p class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="img/cc-by-nc.svg" /></a> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
118+
<p class="instructions">Use the left <i class="fa fa-arrow-left"></i> and right <i class="fa fa-arrow-right"></i> arrow keys to navigate</p>
119+
</footer>
120+
121+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
122+
<script src="scripts/slideshow.js"></script>
123+
124+
<!-- Uncomment the plugins you need -->
125+
<script src="scripts/plugins/css-edit.js"></script>
126+
<script src="scripts/plugins/css-snippets.js"></script>
127+
<script src="scripts/plugins/css-Ctrls.js"></script>
128+
<!-- <script src="plugins/code-highlight.js"></script>-->
129+
130+
<script src="scripts/plugins/markdown/marked.js"></script>
131+
<script src="scripts/plugins/markdown/markdown.js"></script>
132+
<script src="scripts/plugins/highlight/highlight.js"></script>
133+
<script>hljs.initHighlightingOnLoad();</script>
134+
135+
<!-- Prettify -->
136+
<script src="scripts/plugins/prettify.js"></script>
137+
<script src="scripts/plugins/lang-css.js"></script>
138+
<script src="scripts/plugins/prism.js"></script>
139+
140+
<script>
141+
var slideshow = new SlideShow();
142+
143+
// Grabs all the .snippet elements
144+
var snippets = document.querySelectorAll('.snippet');
145+
for(var i=0; i<snippets.length; i++) {
146+
new CSSSnippet(snippets[i]);
147+
}
148+
149+
// Opens all links in a new window
150+
var links = document.getElementsByTagName("a");
151+
for (var i = 0; i < links.length; i++) {
152+
var link = links[i];
153+
link.addEventListener(function() {
154+
window.open(this.href);
155+
});
156+
}
157+
158+
jQuery(document).ready(function(){
159+
jQuery(".snippet").before("<span class=\"edit\">edit me</span>");
160+
});
161+
</script>
162+
</body>
163+
</html>

0 commit comments

Comments
 (0)