質問編集履歴

1

情報の修正

2017/10/10 07:03

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,647 +1,3 @@
1
1
  全てのヘッダーのタイトルを同じ位置に持っていきたいです。
2
2
 
3
- top.html に
4
-
5
- ```ここに言語を入力
6
-
7
- % load staticfiles %}
8
-
9
- <html lang="ja">
10
-
11
- <head>
12
-
13
- <meta charset="utf-8">
14
-
15
- <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
16
-
17
- <link rel="stylesheet" href="{% static 'accounts/top.css' %}">
18
-
19
- <link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
20
-
21
- <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
22
-
23
-
24
-
25
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
26
-
27
- <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
28
-
29
- </head>
30
-
31
- <body>
32
-
33
- <header class="clearfix">
34
-
35
- <h1 class="title">WEB SITE</h1>
36
-
37
-
38
-
39
- {% if form.errors %}
40
-
41
- <div class="alert alert-danger" role="alert">
42
-
43
- <p>Email or Password Error</p>
44
-
45
- </div>
46
-
47
- {% endif %}
48
-
49
-
50
-
51
-
52
-
53
- <ul>
54
-
55
- <form class="form-inline" action="{% url 'accounts:detail' %}" method="post" role="form">
56
-
57
- {% csrf_token %}
58
-
59
- <div class="form-group">
60
-
61
- <label class="white-letter">LOGIN</label>
62
-
63
- </div>
64
-
65
- <div class="form-group">
66
-
67
- <label class="sr-only">USERNAME</label>
68
-
69
- <input id="id_username" name="username" type="text" value="" minlength="5" maxlength="12" placeholder="USERNAME" class="form-control">
70
-
71
- </div>
72
-
73
- <div class="form-group">
74
-
75
- <label class="sr-only">PASSWORD</label>
76
-
77
- <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="PASSWORD" class="form-control">
78
-
79
- </div>
80
-
81
- <div class="form-group">
82
-
83
- <button type="submit" class="btn btn-primary btn-lg" style="color:white;background-color: #F62459;border-style: none;">LOGIN</button>
84
-
85
- <input name="next" type="hidden"/>
86
-
87
- </div>
88
-
89
- </form>
90
-
91
- </ul>
92
-
93
- </header>
94
-
95
-
96
-
97
- <main>
98
-
99
- <div class="container">
100
-
101
- <div class="heading col-lg-6 col-md-12">

102
-
103
- <h1>TOPIC</h1>

104
-
105
- <h3>WEB SITE</h3>

106
-
107
- <h4>This web site is<br>useful to you</h4>

108
-
109
- </div>
110
-
111
-
112
-
113
- 
 <div class="heading col-lg-6 col-md-12">

114
-
115
- <h2>NEW REGISTRATION</h2>
116
-
117
- 
 <h3 class="margin-small">ALL FREE</h3>

118
-
119
-
120
-
121
- <form class="form-horizontal" action="{% url 'accounts:detail' %}" method="POST">

122
-
123
- <div class="form-group-lg">

124
-
125
- <label for="id_username">USERNAME</label>
126
-
127
- 
 {{ regist_form.username }}

128
-
129
- </div>
 

130
-
131
- <div class="form-group-lg">

132
-
133
- <label for="id_email">EMAIL</label>
134
-
135
- 
 {{ regist_form.email }}
136
-
137
- </div>
 

138
-
139
- <div class="form-group-lg">

140
-
141
- <label for="id_password">PASSWORD</label>

142
-
143
- {{ regist_form.password1 }}

144
-
145
- </div>
 

146
-
147
- <div class="form-group-lg">
148
-
149
- <label for="id_password">PASSWORD(CONFORMATION)</label>

150
-
151
- {{ regist_form.password2 }}
152
-
153
- <p class="help-block">{{ regist_form.password2.help_text }}</p>

154
-
155
- </div>
 

156
-
157
- <div class="form-group-lg">
158
-
159
- <div class="col-xs-offset-2">
160
-
161
- <button type="submit" class="btn btn-primary btn-lg" style="color:white;background-color: #F62459;border-style: none;">SUBMIT</button>

162
-
163
- <input name="next" type="hidden"/>

164
-
165
- </div>
166
-
167
- </div>
168
-
169
- {% csrf_token %}

170
-
171
- </form>

172
-
173
- </div>
174
-
175
- </div>
176
-
177
- </main>
178
-
179
- </body>
180
-
181
- </html>
182
-
183
- ```
184
-
185
- top.cssに
186
-
187
- ```ここに言語を入力
188
-
189
- ul {
190
-
191
- display: flex;
192
-
193
- }
194
-
195
-
196
-
197
-
198
-
199
- .flex-item {
200
-
201
- width: 100%;
202
-
203
- }
204
-
205
-
206
-
207
- .half-width{
208
-
209
- width: 50%;
210
-
211
- }
212
-
213
-
214
-
215
- .title{
216
-
217
- color:white;
218
-
219
- font-size: 70px;
220
-
221
- align-self: center;
222
-
223
-
224
-
225
- }
226
-
227
-
228
-
229
- main {
230
-
231
- display: flex;
232
-
233
- }
234
-
235
-
236
-
237
-
238
-
239
- .white-letter{
240
-
241
- color:white;
242
-
243
- }
244
-
245
-
246
-
247
- .right-position{
248
-
249
- width: 100%;
250
-
251
- }
252
-
253
-
254
-
255
- .float-left{
256
-
257
- float: left;
258
-
259
- }
260
-
261
-
262
-
263
- .btn btn-primary btn-lg{
264
-
265
-  background-color: #F62459;
266
-
267
-
268
-
269
- }
270
-
271
-
272
-
273
- .outer{
274
-
275
- display: flex;
276
-
277
- justify-content: center;
278
-
279
- align-items: center;
280
-
281
- }
282
-
283
-
284
-
285
- .margin-small{
286
-
287
- margin-top: 10px;
288
-
289
- margin-bottom: 10px;
290
-
291
- }
292
-
293
-
294
-
295
- .big-padding{
296
-
297
- padding-left: 10px;
298
-
299
- padding-right: 10px;
300
-
301
- }
302
-
303
- ```
304
-
305
- と書きました。ヘッダータイトル"WEB SITE"を全て同じ位置持っていきたいです
3
+ なぜこのようになってしうのでょうか?top.htmlの"WEB SITE"の文字の位置と同じにたいですが....
306
-
307
- でもprofile.htmlに
308
-
309
- ```ここに言語を入力
310
-
311
- {% load static%}
312
-
313
- <html lang="ja">
314
-
315
-
316
-
317
- <head>
318
-
319
- <meta charset="UTF-8">
320
-
321
- <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
322
-
323
- <link rel="stylesheet" href="{% static 'accounts/detail.css' %}">
324
-
325
- <link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
326
-
327
- <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
328
-
329
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
330
-
331
- <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
332
-
333
-
334
-
335
- <title>WEB SITE</title>
336
-
337
- </head>
338
-
339
-
340
-
341
- <body>
342
-
343
- <header class="clearfix">
344
-
345
- <h1 class="title">WEB SITE</h1>
346
-
347
-
348
-
349
- <li>
350
-
351
- <form class="form-inline" name="logout" method="post" action="{% url 'accounts:logout' %}">
352
-
353
- {% csrf_token %}
354
-
355
- <div class="form-group">
356
-
357
- <button type="submit" class="btn btn-primary" style="color:white;background-color: #F62459;border-style: none;" id="logout">LOGOUT</button>
358
-
359
- <input name="next" type="hidden" />
360
-
361
- </div>
362
-
363
- </form>
364
-
365
- </li>
366
-
367
-
368
-
369
- </header>
370
-
371
-
372
-
373
- <main>
374
-
375
- <div class="container">
376
-
377
- <div class="detailimg col-xs-12">
378
-
379
- <img class="small_img" src="{% static 'accounts/detail.jpg' %}" alt="DETAIL" />
380
-
381
- <div class="absolute-fill vertical-center-container">
382
-
383
- <p class="hthree">USEFUL WEBSITE
384
-
385
- <span class="hthree_small">
386
-
387
- <br>XOXO
388
-
389
- <br>I LOVE YOU</span>
390
-
391
- </p>
392
-
393
- </div>
394
-
395
- </div>
396
-
397
-
398
-
399
- <div class="bodyele col-xs-12">
400
-
401
- <a class="button-primary" href="{% url 'accounts:profile' %}">SEND</a>
402
-
403
- <a class="button-primary" href="{% url 'accounts:results' %}">SEE</a>
404
-
405
- <a class="button-primary" href="{% url 'accounts:results' %}">KNOW</a>
406
-
407
-
408
-
409
- </div>
410
-
411
- </div>
412
-
413
- </main>
414
-
415
- </body>
416
-
417
-
418
-
419
- </html>
420
-
421
- ```
422
-
423
- profile.cssに
424
-
425
- ```ここに言語を入力
426
-
427
- * {
428
-
429
- margin: 0;
430
-
431
- padding: 0;
432
-
433
- }
434
-
435
-
436
-
437
- header {
438
-
439
- height: 100px;
440
-
441
- background-color: pink;
442
-
443
- align-items: center;
444
-
445
- display: flex;
446
-
447
- justify-content: space-between;
448
-
449
- }
450
-
451
-
452
-
453
- ul {
454
-
455
- display: flex;
456
-
457
- }
458
-
459
-
460
-
461
- .flex-item {
462
-
463
- width: 100%;
464
-
465
- }
466
-
467
-
468
-
469
- .half-width {
470
-
471
- width: 50%;
472
-
473
- }
474
-
475
-
476
-
477
- .title {
478
-
479
- color: white;
480
-
481
- font-size: 70px;
482
-
483
- align-self: center;
484
-
485
- }
486
-
487
-
488
-
489
- main {
490
-
491
- display: flex;
492
-
493
- }
494
-
495
-
496
-
497
- main div.detailimg {
498
-
499
- margin: 30px;
500
-
501
- }
502
-
503
-
504
-
505
- .white-letter {
506
-
507
- color: white;
508
-
509
- }
510
-
511
-
512
-
513
- .right-position {
514
-
515
- width: 100%;
516
-
517
- }
518
-
519
-
520
-
521
- .float-left {
522
-
523
- float: left;
524
-
525
- }
526
-
527
-
528
-
529
- .btn btn-primary btn-lg {
530
-
531
- background-color: #F62459;
532
-
533
- }
534
-
535
-
536
-
537
- .outer {
538
-
539
- display: flex;
540
-
541
- justify-content: center;
542
-
543
- align-items: center;
544
-
545
- }
546
-
547
-
548
-
549
- #id {
550
-
551
- margin-top: 30px;
552
-
553
- }
554
-
555
-
556
-
557
- .small_img {
558
-
559
- width: 500px;
560
-
561
- height: auto;
562
-
563
- }
564
-
565
-
566
-
567
- .absolute-fill {
568
-
569
- position: absolute;
570
-
571
- left: 0px;
572
-
573
- right: 0px;
574
-
575
- top: 0px;
576
-
577
- bottom: 0px;
578
-
579
- }
580
-
581
-
582
-
583
- .vertical-center-container {
584
-
585
- display: flex;
586
-
587
- flex-direction: column;
588
-
589
- justify-content: space-around;
590
-
591
- }
592
-
593
-
594
-
595
- .hthree {
596
-
597
- color: white;
598
-
599
- font-size: 30px;
600
-
601
- padding: 0px 20px;
602
-
603
- font-weight: bold;
604
-
605
- }
606
-
607
-
608
-
609
- .hthree_small {
610
-
611
- color: white;
612
-
613
- font-size: 20px;
614
-
615
- padding: 0px 20px;
616
-
617
- text-align: center;
618
-
619
- }
620
-
621
-
622
-
623
- .button-primary {
624
-
625
- display: inline-block;
626
-
627
- width: 300px;
628
-
629
- height: 45px;
630
-
631
- font-size: 20px;
632
-
633
- background-color: #F62459;
634
-
635
- color: white;
636
-
637
- text-align: center;
638
-
639
- padding: 5px 0px;
640
-
641
- margin: 10px 0px;
642
-
643
- }
644
-
645
- ```
646
-
647
- と書いても同じ位置に全くなりません。同じhtmlタグ/cssの書き方をしているのに"WEB SITE"の文字が同じになりません。なぜこのようになってしまうのでしょうか?top.htmlの"WEB SITE"の文字の位置と同じにしたいのですが....