Q&A
修正いたしました。初歩的なミスですみません。
先ほど投稿させていただいたものがcodeの記述がきちんとされていませんでしたので、こちらで再度投稿させていただきます。失礼いたしました。
Positionを使用した後の段落(footer)が表示されるべき通常の場所(グレーのボックスの下）に表示されません。位置的にPositionが効いてしまっているような状態で表示されてしまいます。(グレーのボックスの中に表示されてしまいます）
通常の場所に表示させるにはどうしたらよいのでしょうか?初歩的な質問でしたらすみませんが、よろしくお願いいたします。
HTML
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> 6<link rel="icon" type="image/png" href="Portfolioimage/y_flower.png" sizes="15px 15px"> 7<link rel="stylesheet" href="about.css"> 8 9<link rel="stylesheet" href="icomoon.css"> 10 11<title>abc</title> 12</head> 13<body> 14 15<header> 16<div class=top_title> 17<p>ABOUT</p> 18</div> 19</header> 20 21<content> 22<div class="main_pic"> 23<img src="Portfolioimage/main_pic.png"> 24</div> 25<div class="main_box"> 26<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p> 27</content> 28 29<footer> 30<div class="abc-right">copyright abc</div> 31</footer> 32 33CSS 34body { 35width: auto; 36margin: 0; 37font-family: Futura Lt BT; 38 39} 40 41.top_title p{ 42text-align: center; 43color: grey; 44padding-top: 2%; 45border-bottom: 1px solid grey; 46padding-bottom: 3px; 47width: 4%; 48margin: 0 auto; 49display: block; 50 51} 52 53.main_pic img{ 54width: 60%; 55height: 30%; 56display: block; 57margin: 0 auto; 58margin-top: 3%; 59position: relative; 60z-index: 1; 61 62} 63 64.main_box { 65width:40%; 66height: 80%; 67padding: 20px; 68background-color: grey; 69text-align: center; 70color: white; 71font-size: 10px; 72z-index: 2; 73position: absolute; 74right: 28%; 75top: 70%; 76 77} 78 79footer{ 80background-color: grey; 81text-align: center; 82} 83 84.abc-right { 85font-size: 12px; 86padding: 2%; 87color: white; 88} 89コード
回答3件
0
他の方がすでに指摘されている</div>の不足は修正するとして、
やりたいことはmain_boxを中央寄せしたいということかなと推測しました。
それをposition: absolute;で実現しようとしているのだと思いますが、position: absolute;は通常フローからはずれて浮いた状態になり、他の要素からはないものと扱われますので、その下のフッターが上に移動してしまいます。
このようなレイアウト目的ではposition: absolute;は使わないようにしましょう。
中央寄せは、ブロック要素の場合は、margin: 0 auto;を設定すればできます。
また、height: 80%;が画面高に対して80%にしたいという意図なら、vh単位を使って指定するといいでしょう。
css
1.main_box { 2 width:40%; 3 height: 80vw; 4 padding: 20px; 5 background-color: grey; 6 text-align: center; 7 color: white; 8 font-size: 10px; 9 margin: 0 auto; 10}
推測での回答ですので、違う点があったら指摘してください。
投稿2020/12/01 01:22
総合スコア34073
0
CSS を直す前に HTML を 2 点修正していただきたい部分があります。
- 下の部分で div タグが閉じていないので
</div>を追記する (tomtomtomtom 様ご指摘部分)
html
1<div class="main_box"> 2<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
- HTML の最後で body タグが閉じていないので HTML の末尾に
</body>を追記する
投稿2020/11/30 23:29
編集2020/11/30 23:33
総合スコア9
いえいえ、一歩前に進めてよかったです。
もし可能であれば、お使いのエディタに文法チェックツールを入れるとこういったミスを検知しやすくなりますので、お試しください。
「html 文法チェックツール」など
0
htmlを拝見するに
<div class="main_box">が閉じられていないようです。 また、main_boxのpositionを消せば、上から順に並ぶかと思います。如何でしょうか？
投稿2020/11/30 23:23
総合スコア563
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/01 02:00
2020/12/01 02:22