途中から表示されません。初心者ですが宜しくお願いします。

初心者質問です。
下記の通り書いたのですが二つ目のdiv以降が表示されません。
原因がわからないので教えていただきたいです。

本当に初心者なので質問の内容が初歩的ですが宜しくお願い申し上げます。

HTML

<!DOCTYPE> <html> <head> <title></title>

<meta charset="UTF-8">
<title>リアルわらしべ長者イベント</title>
<link rel="stylesheet" type="text/css"  href="warashibe.css">
<meta name="viewport" content="width=device-width,initial-scale=1">

</head> <body> <div class = container> <header>リアルわらしべ長者イベント</header>

<p class = "colabo">AXIS×CARRY</p>

<img src="warashibe.jpg" class = "warashibe">

</div> <div class = detail> <h2>わらしべイベントとは</h2> </div> </body> </html>

CSS

/幅が最後まで来るように設定/
html,body{
margin:0;
margin-top: 0px;
padding:0;
}

header{
color:gray;
text-align: center;

}

hr{
width: 100%;
}

.container{
background-color: cornsilk;
height: 900px;
position: absolute;
width: 100%;

}

h1{
color:gray;
text-align: center;
}

h2{
color:black;
font-size: 20px;

}

.colabo{
color: gray;
font-size: 30px;
text-align: center;
}

.warashibe{
border-radius: 10px;
bottom: 0;
display: block;
height: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 66%;

}

.detail{
height: 100px;
width: 100%;
}

gouf

2015/09/20 10:17

実際はどのように表示されることを想定されていますか

zeben

2015/09/20 10:25

まだ製作途中なのであらなのですが、containerクラスがあるdivの下にh2を表示したいです。宜しくお願い致します。

行動規範の内容に同意します

回答3件

containerクラスに指定しているposition: absoluteが原因となっているので、不要なら外してみてください。
最終的にどのような表示を求めているのか見えないので、これで完全解決なのかは判りませんが・・・。

投稿2015/09/20 11:01

hy3

総合スコア594

表示されていないのではなくて、最初の div 要素の背後に隠れてしまっているようですね…

goufさんがコメントされているように、まずは「どのように表示されることを想定」しているのかを再確認した後に、まずは全体のレイアウトを先に決めてしまった方が楽だと思います。

たとえば下記↓の解説などを参考に、１つ目と２つ目の div 要素の配置関係を決めてから内部の細かな見た目の調整をされてはいかがでしょうか？
CSSでレイアウトするなら絶対覚えておきたい配置のルール

それと、確認用のブラウザには何をしようされているか分かりませんが、最近にブラウザは標準で開発ツールが組み込まれています。せっかく備わっている機能なので、ぜひ使ってみてください。
主要ブラウザ5種の開発者ツールの開き方まとめ
 Firefox内蔵の開発ツール使いやすい！と思った11のポイント

投稿2015/09/20 11:00

pi-chan

総合スコア5936

1つめのdivであるcontainerですが、名前のニュアンスとCSSのプロパティを見るにこれは2つめのdivであるdetailを内包するものでしょうか？

あとこちらにコードを記載する際に抜けてしまったのか
わからないのですが、１つめと２つめのdivがともにclassを指定する際の「""」が抜けてしまっています。
これではCSSが正しくdetailを認識しなくなってしまうので、""をつけて修正してあげてください。

上記の僕の解釈で正しいと仮定してコードを下記に記載させて頂きます。
もし意図が異なる場合はお知らせ下さい。

↓以下、bodyタグ部分のみを記載します。

HTML
1<body>     
2 <!-- ↓containerを" "マークでしっかり囲む -->
3   <div class = "container"> 
4        <header>リアルわらしべ長者イベント</header> 
5
6        <p class = "colabo">AXIS×CARRY</p> 
7
8        <img src="warashibe.jpg" class = "warashibe"> 
9
10    <!-- ↓detailを" "マークでしっかり囲む -->
11   	<div class = "detail"> 
12     	   <h2>わらしべイベントとは</h2> 
13   	</div>  
14   </div>  
15
16</body> 
17