-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
286 lines (243 loc) · 15.1 KB
/
index.html
File metadata and controls
286 lines (243 loc) · 15.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Floating Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<section id="floatsample-1">
<h1>Float Sample 1</h1>
<p><em>The first three look the same, but see how different CSS techniques are used to achieve the same result. Play with floating and width on the fourth. See the comments in the HTML & CSS.</em></p>
<div class="main">
<article id="fs1sample1"> <!-- I'm nesting boxes together here; but think about accessibility and source order concerns -->
<aside class="short-container">
<div class="short">
<p><span class="boxnumber">1</span>We (1 and 3) are nested together.</p>
</div>
<div class="short">
<p><span class="boxnumber">3</span>We (1 and 3) are nested together.</p>
</div>
</aside>
<aside class="short-container">
<div class="short">
<p><span class="boxnumber">2</span>We (2 and 4) are nested together.</p>
</div>
<div class="short">
<p><span class="boxnumber">4</span>We (2 and 4) are nested together.</p>
</div>
</aside>
</article>
<article id="fs1sample2"> <!-- this time I'm not nesting them together, but I've given the container div a fixed width -->
<div class="short-container short">
<p><span class="boxnumber">1</span>We are feeling contrained.</p>
</div>
<div class="short-container short">
<p><span class="boxnumber">2</span>We are feeling constrained.</p>
</div>
<div class="short-container short">
<p><span class="boxnumber">3</span>We are feeling constrained.</p>
</div>
<div class="short-container short">
<p><span class="boxnumber">4</span>We are feeling constrained.</p>
</div>
</article>
<article id="fs1sample3"> <!-- this time I'm not nesting or giving the container div a fixed width -->
<div class="short-container short" id="fs1-block1">
<p><span class="boxnumber">1</span>Box 3 is staying clear.</p>
</div>
<div class="short-container short" id="fs1-block2">
<p><span class="boxnumber">2</span>Box 3 is staying clear.</p>
</div>
<div class="short-container short" id="fs1-block3">
<p><span class="boxnumber">3</span>Box 3 is staying clear.</p>
</div>
<div class="short-container short" id="fs1-block4">
<p><span class="boxnumber">4</span>Box 3 is staying clear.</p>
</div>
</article>
<article id="fs1sample4"> <!-- this container has a fixed width -->
<div class="tall-container tall">
<p><span class="boxnumber">1</span>How do I stack up?</p>
</div>
<div class="short-container short">
<p><span class="boxnumber">2</span>We are feeling constrained.</p>
</div>
<div class="short-container short">
<p><span class="boxnumber">3</span>We are feeling constrained.</p>
</div>
<div class="long-container">
<p><span class="boxnumber">4</span>What am I up to?</p>
</div>
</article>
</div>
</section>
<section id="paddingsidenote">
<h2>Padding Sidenote</h2>
<p><em>The same padding is applied, but to two different elements. What happens to the width and height of the boxes as you adjust the padding? Which gives you more control to individually center text in a box? What happens when you change it from padding to margin?</em></p>
<div class="main">
<article id="paddingapplication">
<aside class="paddingstyle1" id="ps-block1">
<p><span class="boxnumber">1</span>Compare where our padding is applied (1 and 2). Pastry topping jelly beans.</p>
</aside>
<aside class="paddingstyle1" id="ps-block2">
<p><span class="boxnumber">2</span>Compare where our padding is applied (1 and 2).</p>
</aside>
<aside class="paddingstyle2">
<p id="ps-block3"><span class="boxnumber">3</span>Versus where our padding is applied (3 and 4). Pastry topping jelly beans.</p>
</aside>
<aside class="paddingstyle2">
<p id="ps-block4"><span class="boxnumber">4</span>Versus where our padding is applied (3 and 4).</p>
</aside>
</article>
</div>
</section>
<section id="parentvchild">
<h2>Parent vs Child</h2>
<p><em>This demonstrates floating a parent element vs floating a child element. The first two are structured the same, with a parent half-width div and a child h1 and nav. The difference between them is what is being floated. The third doesn't have a parent element.</em></p>
<div class="main">
<article id="pvc1">
<div class="half-width">
<h1>Head Full of Dreams</h1>
</div>
<div class="half-width">
<nav>
<ul>
<li>Go Here</li>
<li>No Go Here</li>
<li>I'm the Best</li>
</ul>
</nav>
</div>
</article>
<article id="pvc2">
<div class="half-width">
<h1>Head Full of Dreams</h1>
</div>
<div class="half-width">
<nav>
<ul>
<li>Go Here</li>
<li>No Go Here</li>
<li>I'm the Best</li>
</ul>
</nav>
</div>
</article>
<article id="pvc3">
<h1>Head Full of Dreams</h1>
<nav>
<ul>
<li>Go Here</li>
<li>No Go Here</li>
<li>I'm the Best</li>
</ul>
</nav>
</article>
</div>
</section>
<section id="floatsample-2">
<h1>Float Sample 2</h1>
<p><em>These are setup the same, but... One is styled to float boxes left, and one is styled to float boxes right. One is using a fixed height, and one is using overflow auto. What happens when you change the margin on the interior boxes? What happens when you comment out overflow? See the comments in the HTML & CSS.</em></p>
<div class="main">
<article id="fs2sample1">
<div class="wrapper">
<div class="short-container short fs2-block1">
<p><span class="boxnumber">1</span>Liquorice dessert dragée cupcake jelly-o soufflé.</p>
</div>
<div class="tall-container tall">
<p><span class="boxnumber">2</span>Pastry topping jelly beans biscuit jelly gingerbread.</p>
</div>
<div class="short-container short fs2-block3">
<p><span class="boxnumber">3</span>Cake jelly cake cookie ice cream cookie tiramisu biscuit.</p>
</div>
</div>
</article>
<article id="fs2sample2">
<div class="wrapper">
<div class="short-container short fs2-block1">
<p><span class="boxnumber">1</span>Liquorice dessert dragée cupcake jelly-o soufflé.</p>
</div>
<div class="tall-container tall">
<p><span class="boxnumber">2</span>Pastry topping jelly beans biscuit jelly gingerbread.</p>
</div>
<div class="short-container short fs2-block3">
<p><span class="boxnumber">3</span>Cake jelly cake cookie ice cream cookie tiramisu biscuit.</p>
</div>
</div>
</article>
</div>
</section>
<section id="floatsample-3">
<h1>Float Sample 3</h1>
<p><em>What happens when you remove the clear on the paragraph? How does box 6 end up in the empty space? Notice what happens when you increase the main width to 1200px (look closely at boxes 2 and 3 vs 4 and 5). See the comments in the HTML & CSS.</em></p>
<div class="main">
<div class="tall-container tall">
<p><span class="boxnumber">1</span>Pastry topping jelly beans biscuit jelly gingerbread. Muffin carrot cake biscuit candy canes. Macaroon powder tart jujubes gingerbread wafer gingerbread.</p>
</div>
<!-- since I want two short boxes to float against a taller box, I'm nesting them together here; notice what happens when you remove the main width -->
<aside class="short-container">
<div class="short">
<p><span class="boxnumber">2</span>We (2 and 3) are nested together so we stick together like glue, no matter what!</p>
</div>
<div class="short">
<p><span class="boxnumber">3</span>We (2 and 3) are nested together so we stick together like glue, no matter what!</p>
</div>
</aside>
<!-- compare how these second two boxes are set up vs the two above in this sample; they sit one atop the other at the moment, but I've chosen not to nest them together; notice what happens when you remove the main width -->
<div class="short-container short">
<p><span class="boxnumber">4</span>We (4 and 5) can go our separate ways if given the chance.</p>
</div>
<div class="tall-container tall">
<p><span class="boxnumber">5</span>We (4 and 5) can go our separate ways if given the chance.</p>
</div>
<!-- check out comments in the stylesheet in regards to this box -->
<div class="short-container short" id="negative">
<p><span class="boxnumber">6</span>I'm feeling negative (margins, that is).</p>
</div>
<div class="short-container short">
<p><span class="boxnumber">7</span>Macaroon powder tart jujubes.</p>
</div>
<div class="short-container short">
<p><span class="boxnumber">8</span>Jelly-o soufflé gingerbread.</p>
</div>
<!-- check out comments in the stylesheet in regards to this paragraph -->
<p>I want to stay clear of those floats; otherwise, I'll invade their space. Jujubes bear claw pudding marshmallow lemon drops gingerbread. Candy canes croissant jelly beans cupcake chocolate cake. Halvah ice cream fruitcake bear claw jelly beans. Donut powder muffin gingerbread. Marzipan jelly marshmallow. Tootsie roll pastry wafer marshmallow marshmallow.</p>
</div>
</section>
<section id="floatsample-4">
<h1>Float Sample 4</h1>
<p><em>Float Sample 3 relied on a fixed width for main to keep boxes in three columns. See how this is different. Try removing the clear styles on box 3, 6, then 5. Try applything them to different boxes, like box 2. See the comments in the HTML & CSS.</em></p>
<div class="main">
<div class="short-container short" id="fs4-block1">
<p><span class="boxnumber">1</span></p>
</div>
<div class="short-container short" id="fs4-block2">
<p><span class="boxnumber">2</span></p>
</div>
<div class="short-container short" id="fs4-block3">
<p><span class="boxnumber">3</span>Pssst. How am I on a new line?</p>
</div>
<div class="short-container short" id="fs4-block4">
<p><span class="boxnumber">4</span></p>
</div>
<div class="short-container short" id="fs4-block5">
<p><span class="boxnumber">5</span>How am I on a new line & over here?</p>
</div>
<div class="short-container short" id="fs4-block6">
<p><span class="boxnumber">6</span>How am I on a new line?</p>
</div>
<!-- check out comments in the stylesheet in regards to this paragraph -->
<p>I want to stay clear of those floats; otherwise, I'll invade their space. Jujubes bear claw pudding marshmallow lemon drops gingerbread. Candy canes croissant jelly beans cupcake chocolate cake. Halvah ice cream fruitcake bear claw jelly beans. Donut powder muffin gingerbread.</p>
<p>Marzipan jelly marshmallow. Tootsie roll pastry wafer marshmallow marshmallow. Tiramisu macaroon chupa chups cheesecake jelly-o. Jelly-o candy canes chupa chups jelly danish cotton candy topping. Soufflé bonbon gummi bears.</p>
<p>Icing oat cake jelly-o cake chupa chups bonbon pastry. Chocolate bar caramels soufflé. Donut marzipan caramels cake ice cream.Jelly wafer liquorice muffin muffin tart jelly beans pie.</p>
</div>
</section>
<footer>
<p><em>Ta ta for now!</em></p>
</footer>
</body>
</html>