Skip to content

Commit d4cc22f

Browse files
christinatruongchristinatruong
committed
Simplified positioning, removed last reference to sticky footer to extras, updated example files.
1 parent 49affa4 commit d4cc22f

10 files changed

Lines changed: 312 additions & 238 deletions

‎framework/extras-positioning.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
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">
30+
<h2>Position: relative</h2>
31+
32+
<p>When setting the position to <code>relative</code>, elements will still appear within the <strong>normal flow</strong> a page but will unlock the additional offset properties (top, right, bottom, left). You can use these values to nudge the element in different directions. Try adding a top value (or any offset property).</p>
33+
34+
<textarea class="snippet" data-subject="#relative">.box {
35+
width: 100px;
36+
height: 100px;
37+
background: blue;
38+
position: relative;
39+
top:;
40+
}</textarea>
41+
<div id="#relative">
42+
<div class="box"></div>
43+
</div>
44+
</section>
45+
46+
<section class="slide">
47+
<h2>Position: absolute</h2>
48+
49+
<p>When positioning an element as <code>absolute</code>, it can be tricky. It needs to also be paired with another positioning property, added to a parent element, to <em>contain</em> it to a particular spot.</p>
50+
51+
<p>Usually <code>relative</code> positioning is used because it doesn't affect other elements around it. However, the absolute values will be <em>relative</em> to the next parent element with relative, absolute or fixed positioning. If there is no such parent, it will default to the browser window.</p>
52+
<pre><code>&lt;div class=&quot;container&quot;&gt;
53+
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
54+
&lt;/div&gt;</code></pre>
55+
56+
Try removing <code>position: relative;</code> in the example below and see what happens.<br>
57+
<textarea class="snippet" data-subject="#absolute">.container {
58+
position: relative;
59+
}
60+
.box {
61+
width: 100px;
62+
height: 100px;
63+
background: blue;
64+
position: absolute;
65+
top: 0;
66+
}</textarea>
67+
68+
<div id="absolute">
69+
<div class="container">
70+
<div class="box"></div>
71+
</div>
72+
</div>
73+
</section>
74+
75+
<section class="slide">
76+
<h2>Position: fixed</h2>
77+
78+
<p>When positioning an element as <code>fixed</code>, it will <em>always</em> be positioned to the viewport. <code>relative</code> or <code>absolute</code> won't have any effect on this property. Also, it will always stay fixed on the page, even on page scroll.</p>
79+
<pre><code>&lt;div class=&quot;container&quot;&gt;
80+
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
81+
&lt;/div&gt;</code></pre>
82+
83+
<textarea class="snippet" data-subject="#fixed">.container {
84+
position: relative; /* has no effect on fixed */
85+
}
86+
.box {
87+
width: 100px;
88+
height: 100px;
89+
background: blue;
90+
position: fixed;
91+
bottom: 0;
92+
}</textarea>
93+
94+
<div id="fixed">
95+
<div class="container">
96+
<div class="box"></div>
97+
</div>
98+
</div>
99+
</section>
100+
</main><!-- cls main section -->
101+
102+
<footer>
103+
<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>
104+
<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>
105+
</footer>
106+
107+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
108+
<script src="scripts/slideshow.js"></script>
109+
110+
<!-- Uncomment the plugins you need -->
111+
<script src="scripts/plugins/css-edit.js"></script>
112+
<script src="scripts/plugins/css-snippets.js"></script>
113+
<script src="scripts/plugins/css-Ctrls.js"></script>
114+
<!-- <script src="plugins/code-highlight.js"></script>-->
115+
116+
<script src="scripts/plugins/markdown/marked.js"></script>
117+
<script src="scripts/plugins/markdown/markdown.js"></script>
118+
<script src="scripts/plugins/highlight/highlight.js"></script>
119+
<script>hljs.initHighlightingOnLoad();</script>
120+
121+
<!-- Prettify -->
122+
<script src="scripts/plugins/prettify.js"></script>
123+
<script src="scripts/plugins/lang-css.js"></script>
124+
<script src="scripts/plugins/prism.js"></script>
125+
126+
<script>
127+
var slideshow = new SlideShow();
128+
129+
// Grabs all the .snippet elements
130+
var snippets = document.querySelectorAll('.snippet');
131+
for(var i=0; i<snippets.length; i++) {
132+
new CSSSnippet(snippets[i]);
133+
}
134+
135+
// Opens all links in a new window
136+
var links = document.getElementsByTagName("a");
137+
for (var i = 0; i < links.length; i++) {
138+
var link = links[i];
139+
link.addEventListener(function() {
140+
window.open(this.href);
141+
});
142+
}
143+
144+
jQuery(document).ready(function(){
145+
jQuery(".snippet").before("<span class=\"edit\">edit me</span>");
146+
});
147+
</script>
148+
</body>
149+
</html>

‎framework/extras-sticky-footer.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,15 @@
2727

2828
<main>
2929
<section class="slide" data-markdown>
30+
##Sticky Footer
31+
32+
Remember the natural stacking order? HTML elements stack on top of each other in the order that they appear in the HTML. Each element is as tall as their content (unless otherwise specified).
33+
34+
On the home page, the footer appears right below the headings. On the about page, it appears on the bottom because the content is long enough to scroll.
35+
36+
To ensure that your footer is always at the bottom of the page, no matter how long the page content is or how big the browser window is, use a "sticky footer".
37+
</section>
38+
<section class="slide" data-markdown>
3039
##Create a Sticky Footer
3140

3241
We'll be following these instructions: http://css-tricks.com/snippets/css/sticky-footer/

‎index.html‎

Lines changed: 20 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1416,99 +1416,29 @@ <h2>Float & Clear</h2>
14161416
<section class="slide" data-markdown>
14171417
##Positioning in CSS
14181418

1419-
Sometimes floats and display just doesn't cut it.
1419+
Sometimes floats and display just doesn't cut it for laying out page elements.
14201420

14211421
The `position` property can be used to place elements in specific spots on the page without affecting the elements around it the way floats do. There are three options: `relative`, `absolute` and `fixed`. Elements are all `static` by default.
14221422

14231423
`position` is used in conjunction with **offset properties**: `top`, `right`, `bottom`, and `left`. These are use to identify where an element will be positioned.
1424-
</section>
1425-
<section class="slide">
1426-
<h2>Position: relative</h2>
1427-
1428-
<p>When setting the position to <code>relative</code>, elements will still appear within the <strong>normal flow</strong> a page but will unlock the additional offset properties (top, right, bottom, left). You can use these values to nudge the element in different directions. Try adding a top value (or any offset property).</p>
1429-
1430-
<textarea class="snippet" data-subject="#relative">.box {
1431-
width: 100px;
1432-
height: 100px;
1433-
background: blue;
1434-
position: relative;
1435-
top:;
1436-
}</textarea>
1437-
<div id="#relative">
1438-
<div class="box"></div>
1439-
</div>
1440-
</section>
1441-
1442-
<section class="slide">
1443-
<h2>Position: absolute</h2>
1444-
1445-
<p>When positioning an element as <code>absolute</code>, it can be tricky. It needs to also be paired with another positioning property, added to a parent element, to <em>contain</em> it to a particular spot.</p>
1446-
1447-
<p>Usually <code>relative</code> positioning is used because it doesn't affect other elements around it. However, the absolute values will be <em>relative</em> to the next parent element with relative, absolute or fixed positioning. If there is no such parent, it will default to the browser window.</p>
1448-
<pre><code>&lt;div class=&quot;container&quot;&gt;
1449-
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
1450-
&lt;/div&gt;</code></pre>
1451-
1452-
Try removing <code>position: relative;</code> in the example below and see what happens.<br>
1453-
<textarea class="snippet" data-subject="#absolute">.container {
1454-
position: relative;
1455-
}
1456-
.box {
1457-
width: 100px;
1458-
height: 100px;
1459-
background: blue;
1460-
position: absolute;
1461-
top: 0;
1462-
}</textarea>
14631424

1464-
<div id="absolute">
1465-
<div class="container">
1466-
<div class="box"></div>
1467-
</div>
1468-
</div>
1469-
<div class="presenter-notes">
1470-
<p>Assure learners that this is a confusing concept and it will be demonstrated again in the upcoming exercise.</p>
1471-
</div>
1425+
To view more about positioning, check out this extra resource: [position relative, absolute & fixed](framework/extras-positioning.html).
14721426
</section>
14731427

14741428
<section class="slide">
1475-
<h2>Position: fixed</h2>
1476-
1477-
<p>When positioning an element as <code>fixed</code>, it will <em>always</em> be positioned to the viewport. <code>relative</code> or <code>absolute</code> won't have any effect on this property. Also, it will always stay fixed on the page, even on page scroll.</p>
1478-
<pre><code>&lt;div class=&quot;container&quot;&gt;
1479-
&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
1480-
&lt;/div&gt;</code></pre>
1429+
<h2>Class Exercise #7 - Positioning the Header &amp; Nav</h2>
14811430

1482-
<textarea class="snippet" data-subject="#fixed">.container {
1483-
position: relative; /* has no effect on fixed */
1484-
}
1485-
.box {
1486-
width: 100px;
1487-
height: 100px;
1488-
background: blue;
1489-
position: fixed;
1490-
bottom: 0;
1491-
}</textarea>
1492-
1493-
<div id="fixed">
1494-
<div class="container">
1495-
<div class="box"></div>
1496-
</div>
1497-
</div>
1498-
</section>
1499-
1500-
<section class="slide">
1501-
<h2>Class Exercise - Positioning the Header &amp; Nav</h2>
1502-
1503-
<p>Set the <em>entire</em> header itself to a fixed position so it stays in place at the top of the page on scroll.</p>
1431+
<p>Set the <em>entire</em> header to a fixed position so it stays in place at the top of the page on scroll.</p>
15041432

15051433
<pre><code>header {
15061434
position: fixed;
1435+
top: 0;
15071436
}
15081437
</code></pre>
15091438

15101439
<p>Let's check these changes on our <strong>About</strong> page.</p>
1511-
<p>Positioning takes the element out of the natural stacking order. See how the profile picture “jumped” underneath the header when <code>position: fixed</code> was applied? It’s because it doesn’t “see” that there’s an element before it, so it wants to slide up to the next available slot. Add some padding on the top of the <code>section</code> element to push the content down below the fixed header. Then try scrolling down the page.</p>
1440+
<p>Positioning also takes the element out of the natural stacking order. See how the profile picture “jumped” underneath the header when <code>position: fixed</code> was applied? It’s because it doesn’t “see” that there’s an element before it, so it wants to slide up to the next available slot.</p>
1441+
<p>Add some padding on the top of the <code>section</code> element to push the content down below the fixed header. Then try scrolling down the page.</p>
15121442

15131443
<pre><code>section {
15141444
padding-top: 125px;
@@ -1534,7 +1464,7 @@ <h2>Class Exercise - Positioning the Header &amp; Nav</h2>
15341464
}
15351465
</code></pre>
15361466

1537-
<p>Next up, position the nav to the top right of the header element. Since the header already has positioning applied to it, the nav will be relative to it.</p>
1467+
<p>Next up, position the <code>nav</code> to the top right of the header element. Since the header already has positioning applied to it, the nav will be relative to it.</p>
15381468

15391469
<pre><code>nav {
15401470
position: absolute;
@@ -1543,28 +1473,31 @@ <h2>Class Exercise - Positioning the Header &amp; Nav</h2>
15431473
}
15441474
</code></pre>
15451475

1546-
<p>Your page should look like <a href="project/examples/exercise6-about.html">example 6</a>. Note how the header looks the same on all three pages now… except the home page! Where did the navigation disappear off to?</p>
1476+
<p>Your page should look like <a href="project/examples/exercise7-about.html">example 7</a>. Note how the header looks the same on all three pages now.</p>
1477+
<p>Wait! Where did the footer content disappear off to on the home and contact pages!?</p>
15471478

15481479
<div class="presenter-notes">
15491480
<p>Reinforce the ordering of CSS styles for organization during this exercise and stress the importance of keeping the styles in related groupings to keep from possibly duplicating styles or creating specificity issues.</p>
15501481
</div>
15511482
</section>
15521483

15531484
<section class="slide" data-markdown>
1554-
##Class attribute & the Home page styles
1485+
##Home page styles
1486+
1487+
The home page and contact page currently doesn't have any content in it so the footer is just "underneath" the header.
15551488

1556-
The final design for the home page is different from the other two pages including the order of the HTML. On **index.html**, the nav HTML comes *before* the header. The nav didn't disappear, it's just *under* the header.
1489+
However, the final design for the home page is different from the other two pages so we'll need to create special styles for the home page.
15571490

1558-
For the Home page, we can add a `class` attribute to create a specific selector to override the styles that are shared between the About and Contact page. This class will allow us to apply specific styles just for the home page.
1491+
Let's use the `class` attribute to create a selector to allow us to apply specific styles just to the home page.
15591492

1560-
Let's add a class to the `body` tag so we can override any styles for any element contained within the page.
1493+
Add the class to the `body` tag so we can override any styles for any element contained within the entire page.
15611494

15621495
```
15631496
&lt;body class=&quot;home&quot;&gt;
15641497
```
15651498
</section>
15661499
<section class="slide" data-markdown>
1567-
##Class Exercise #7 - Homepage Header & Nav
1500+
##Class Exercise #8 - Homepage Header & Nav
15681501

15691502
These are the styles we are going to change to update the home page.
15701503

@@ -1596,27 +1529,13 @@ <h2>Class Exercise - Positioning the Header &amp; Nav</h2>
15961529
}
15971530
```
15981531

1599-
Add the `.highlight` class to your first name again, to match the styles on the other pages.
1532+
If you haven't already, add the `.highlight` class to your first name, to match the styles on the other pages.
16001533

16011534
```xml
16021535
&lt;h1&gt;&lt;span class=&quot;highlight&quot;&gt;Jane&lt;/span&gt;Smith&lt;/h1&gt;
16031536
```
16041537

1605-
Your page should now look something like [example 7](project/examples/exercise7-home.html), located in your examples folder.
1606-
</section>
1607-
1608-
<section class="slide" data-markdown>
1609-
##Sticky Footer
1610-
1611-
Remember the natural stacking order? HTML elements stack on top of each other in the order that they appear in the HTML. Each element is as tall as their content (unless otherwise specified).
1612-
1613-
On the home page, the footer appears right below the headings. On the about page, it appears on the bottom because the content is long enough to scroll. And on the contact page, you can't even see it because it's hidden underneath the positioned header!
1614-
1615-
To ensure that your footer is always at the bottom of the page, no matter how long the page content is or how big the browser window is, use a "sticky footer".
1616-
1617-
For "homework", [follow these instructions](framework/extras-sticky-footer.html) to create a sticky footer.
1618-
1619-
Let's finish the day with background images and forms!
1538+
Your page should now look something like [exercise8-home](project/examples/exercise8-home.html), located in your examples folder.
16201539
</section>
16211540

16221541
<section class="slide" data-markdown>
@@ -1769,7 +1688,7 @@ <h2>Class Exercise #9 - Contact Form</h2>
17691688
</div>
17701689

17711690
<div class="slide" data-markdown>
1772-
##Next Steps & "Homework"
1691+
##Next Steps
17731692

17741693
Though we've covered a lot of material today, there are still lots of things to add to give your web page that extra personalization, finalize some styles and add some polish.
17751694

0 commit comments

Comments
 (0)