-
Notifications
You must be signed in to change notification settings - Fork 0
/
positioning.html
179 lines (172 loc) · 7.17 KB
/
positioning.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- HTML - Name: positioning.html -->
<title>Positioning Activity</title>
<link rel="stylesheet" type="text/css" href="positionstyles.css" />
</head>
<body>
<div class="activity">
<h2>WDD 130 positioning exercises</h2>
For each activity match make the boxes match the image by modifying the stylesheet.
</div>
<div class="activity">
<h2>Activity 1</h2>
<section class="hint"><input type="checkbox"><i></i>
<h3>Hint 1</h3>
<div>
<p>Check out the <a href="https://byui-wdd.github.io/wdd130/activities/w06-css-positioning.html"
target="_blank">activity instructions</a> in Ilearn!</p>
</div>
</section>
<p>Follow the <a href="https://byui-wdd.github.io/wdd130/activities/w06-css-positioning.html"
target="_blank">instructions</a> to make the boxes match <a
href="https://byui-wdd.github.io/wdd130/images/example1.png" target="_blank">this</a> image.</p>
<div class="content1">
<div class="red1"></div>
<div class="green1"></div>
<div class="green1"></div>
<div class="yellow1"></div>
<div class="yellow1"></div>
<div class="blue1"></div>
</div>
</div>
<div class="activity">
<h2>Activity 2</h2>
<section class="hint"><input type="checkbox">
<h3>Hint 2</h3><i></i>
<div>
<p>Remember that the best way to shift elements around slightly on the page is with Margins. You could also use
Grid. Either would work for this. If you choose margin, you can use a <em>negative</em> margin. (ie
margin-top: -20px;)</p>
<h4>Properties used:</h4>
<ul>
<li>margin-top, margin-left</li>
<li>...or...</li>
<li>grid-template-columns: 50px 50px 50px 50px 50px </li>
</ul>
</div>
</section>
<p>Overlap and stagger the squares like in <a href="https://byui-wdd.github.io/wdd130/images/example2.png"
target="_blank">this</a> image.</p>
<div class="content2">
<div class="red2"></div>
<div class="green2"></div>
<div class="yellow2"></div>
<div class="blue2"></div>
</div>
</div>
<div class="activity">
<h2>Activity 3</h2>
<section class="hint"><input type="checkbox">
<h3>Hint 3</h3><i></i>
<div>
<p>This one is going to be best solved with CSS Grid. Remember to make the boxes the right width first...then
start moving them around. </p>
<h4>Properties used:</h4>
<ul>
<li>display:grid;</li>
<li>grid-template-columns:</li>
<li>grid-column-gap:</li>
<li>grid-column:</li>
</ul>
</div>
</section>
Create the 2 column layout like in <a href="https://byui-wdd.github.io/wdd130/images/example3.png"
target="_blank">this</a> image.
<div class="content3">
<div class="red3"></div>
<div class="green3"></div>
<div class="yellow3"></div>
<div class="blue3"></div>
</div>
</div>
<div class="activity">
<h2>Activity 4</h2>
<section class="hint"><input type="checkbox">
<h3>Hint 4</h3><i></i>
<div>
<p>For the others we have been primarily concerned with width. For this one you will need to adjust height as
well. </p>
<h4>Properties used:</h4>
<ul>
<li>display:grid;</li>
<li>grid-template-columns:</li>
<li>grid-row:</li>
</ul>
</div>
</section>
Duplicate the positioning in <a href="https://byui-wdd.github.io/wdd130/images/example4.png"
target="_blank">this</a> image.
<div class="content4">
<div class="red4"></div>
<div class="green4"></div>
<div class="yellow4"></div>
<div class="blue4"></div>
</div>
</div>
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox">
<h3>Hint 5</h3><i></i>
<div>
<p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and
that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start
by making all the shapes the right size and shape.</p>
<h4>Properties used:</h4>
<ul>
<li>float: left;</li>
</ul>
</div>
</section>
Wrap the text around the square like in <a href="https://byui-wdd.github.io/wdd130/images/example5.png"
target="_blank">this</a> image. This is one case where Grid is NOT the right way to solve this one and will in
fact make it harder if you try to use it!
<div class="content5">
<div class="red5"></div>
<div class="green5"></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file
you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of
the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done,
your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own
Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to
update your wireframe before completing this assignment (it is much easier to experiment with different layouts
in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with
using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You
should be able to apply these principles to your site. For futher help, refer back to the Max Design site used
in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
<div class="activity">
<h2>Activity 6</h2>
<section class="hint"><input type="checkbox">
<h3>Hint 6</h3><i></i>
<div>
<p>This one is all about visualizing the grid behind the layout. If you are having a hard time doing that first:
all the sizes are even multiples of 100, and second here is another example with the lines drawn: <a
href="https://byui-wdd.github.io/wdd130/images/example6-hint.png" target="_blank">example 6 with lines</a>.
For this one you will find it easiest if you use px for the column width. You can also use <kbd>z-index</kbd>
to control the element layering. </p>
<h4>Properties used:</h4>
<ul>
<li>display:grid;</li>
<li>grid-template-columns:</li>
<li>grid-column:</li>
<li>grid-row:</li>
<li><a href="https://www.w3schools.com/cssref/pr_pos_z-index.asp" target="_blank">z-index:</a></li>
</ul>
</div>
</section>
Duplicate the positioning in <a href="https://byui-wdd.github.io/wdd130/images/example6.png"
target="_blank">this</a> image.
<div class="content6">
<div class="red6"></div>
<div class="green6"></div>
<div class="yellow6"></div>
<div class="blue6"></div>
</div>
</div>
</body>
</html>