25-23 Displaying it properly [index.html]

1
25-23　Displaying it properly
2
3
4 [index.html]：
5 <!DOCTYPE html>
6 <html>
7
<head>
8
<link type="text/css" rel="stylesheet"
href="stylesheet.css"/>
9
<title>Result</title>
10
</head>
11
<body>
12
<div id="header">
13
<div id="navbar">
14
<ul>
15
<li>Home</li>
16
<li>About Me</li>
17
<li>Plans for World Domination</li>
18
<li>Contact</li>
19
</ul>
20
</div>
21
<h2>About Me</h2>
22
</div>
23
<div id="left">
24
<img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-main_zps26d178c5.jpg"/>
25
<p>I am the angriest puppy in the world. This has been
scientifically proven in several clinical trials.</p>
26
</div>
27
<div id="right">
28
<table>
29
<th colspan="3">My Bros</th>
30
<tr>
31
<td><img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-1_zps5666b8e7.jpg"/></td>
32
<td><img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-2_zps1539e6b2.jpg"/></td>
33
<td><img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-3_zps4692eafa.png"/></td>
34
</tr>
35
<tr>
36
<td><img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-4_zps63ff5aa8.jpg"/></td>
37
<td><img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-5_zps0ee0d2c8.jpg"/></td>
38
<td><img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-6_zpsc4450a60.jpg"/></td>
39
</tr>
40
<tr>
41
<td><img id="bottom_left"
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-7_zps26e8a8d9.jpg"/></td>
42
<td><img
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-8_zps9a1469be.jpg"></td>
43
<td><img id="bottom_right"
src="http://s3.amazonaws.com/codecademy-blog/assets/pupp
y-9_zps3bab7732.jpg"/></td>
44
</tr>
45
</table>
46
</div>
47
<div id="footer">
48
<div id="button">
49
<p>Send me an <span
class="bold">e-mail</span>!</p>
50
</div>
51
</div>
52
</body>
53 </html>
54
55
56 [stylesheet.css]：
57 body {
58
background-color: #b7d1c4
59 }
60
61 h2 {
62
font-family: Verdana;
63
font-weight: bold;
64
text-align: center;
65
padding-top: 25px;
66
padding-bottom: 25px;
67
color: #acd1b2;
68 }
69
70 img {
71
height: 170px;
72
width: 170px;
73
box-shadow: rgba(0,0,0,0.2) 10px 10px;
74
75 }
76
77 #navbar {
78
/*Add your CSS here!*/
79
position: fixed;
80
margin-top: -10px;
81
left:50%;
82
margin-left:-254px;
83 }
84
85 #header {
86
position: relative;
87
top: -10px;
88
background-color: #3c4543;
89
border-top-left-radius: 15px;
90
border-top-right-radius: 15px;
91 }
92
93 ul{
94
list-style-type: none;
95
position: fixed;
96
margin: -10px;
97 }
98
99 li {
100
/*Add your CSS here!*/
101
102
border: 2px solid #000000;
103
font-family: Futura, Tahoma, sans-serif;
104
color: #ffffff;
105
border-radius: 5px 5px;
106
background-color: #cc0323
107 }
108
109 #left{
110
/*Add your CSS here!*/
111
112 }
113
114 p {
115
font-family: Tahoma;
116
font-size: 1em;
117 }
118
119 #right{
120
/*Add your CSS here!*/
121
122 }
123
124 table {
125
border: #000000 1px solid;
126
background-color: #acd1b2;
127
float: right;
128
margin-right: 10px;
129
border-bottom-right-radius: 15px;
130
border-bottom-left-radius: 15px;
131 }
132
133 td {
134
height: 75px;
135
width: 75px;
136 }
137
138 td img {
139
height: 75px;
140
width: 75px;
141
box-shadow: none;
142 }
143
144 th {
145
font-family: Verdana;
146
font-size: 1em;
147
font-weight: normal;
148
color: #3c4543
149 }
150
151 #bottom_left{
152
border-bottom-left-radius: 15px;
153 }
154
155 #bottom_right{
156
border-bottom-right-radius: 15px;
157 }
158
159 #footer{
160
/*Add your CSS here!*/
161
162
position: relative;
163
bottom: -20px;
164
border-bottom-left-radius: 15px;
165
border-bottom-right-radius: 15px;
166
height: 75px;
167
background-color: #3c4543;
168 }
169
170 #button{
171
border: 2px solid #000000;
172
float:left;
173
position: relative;
174
left: 229px;
175
bottom: -20px;
176
border-radius: 5px;
177
background-color: #cc0323;
178
height: 30px;
179
width: 150px;
180
181 }
182
183 #button p{
184
position: relative;
185
bottom: 10px;
186
font-size: 0.8em;
187
color: #acd1b2;
188
text-align: center;
189 }
190
191 .bold{
192
font-family: tahoma;
193
font-weight: bold;
194
font-size: 1.2em;
195
font-variant: small-caps;
196
color: #ffffff;
197 }
198
199
200 □ Displaying it properly
201 Good work! The navigation bar is all stacked up, however,
instead of being laid out horizontally.
202
203 「Instructions」
204 Fix this by:
205 1. Setting li's display value to inline;
206 2. Giving it 5 pixels of padding all around.
207
208
209 -----------------------------------------------------------------------210 □「ナビゲーションバーをクールに並べましょう！」
211 Good work!、、さて、ナビゲーションバーは、すべて積み上げられて現れました
が、しかし、きれいに水平に並ぶべきなのですが。。
212
/* でも、僕はそもそもなぜ、隠れていたのか理由が分かりません？？
213
/* カスケード的には、#navbar も、「position:ﬁxed」です.
214
/* すいませんが、僕には説明できません。
215
/* 現実的な対応策としては、結果オーライ！ということでしょう。
216
/* つまり、色々いじって、自分の思い通りになったら、、
217
/* ブラウザの⼤きさを変えたり、解像度を変えたりして、
218
219
220
/* 解像度を変えるには、Googleクロムでは、「Ctr と +/- 」です.
/* 上手く表示出来ていると思えばOKということです。
/* あくまで、解決法の一つですが.
221
/* クロスブラウザの問題？？、それは、僕の場合は、無視です。
222
/* 仕事であれば許されなくとも、趣味で作る分には、
223
/* 推奨環境などを示しておけばいいのではないでしょうか？
224
225
/* これは、大きなお世話な話ですが、何事も、90％ぐらいまでは、
226
/* やればやった分だけ努⼒は報われると思いますが、、
227
/* 100%にしようとすると、とたんに、ハードルが高くなり、
228
/* 時間も、かなりかかるようになる気がします。
229
230
231 「Instructions」
232 では、ナビゲーションバーを水平にしてみましょう。
233
① <li>要素の、CSSコードにおいて、displayプロパティと
234
その値に、inline を、設定しましょう.
235
② <li>要素の四方に、5px の、padding を、付けましょう
236
、、クールになりますね。
237
/ padding は、border/ボーダーの内側でした.
238
/ コンテンツエッジの、外です.
239
240
241
25-23　Displaying it properly

Download Report