ヘッダーの画像にメインエリアがかぶってしまいます

締切済

質問者：SUI42
質問日時：2022/11/28 14:06
回答数：1件

書籍を写す形でサイト作成の練習をしております。
該当する箇所の値や数値は間違っていないはずなのですが、画像がお手本より少し見きれ、また、下のメインエリアの文字や画像が被ってしまう状態となっております。
この場合どうすればいいのでしょ
HTML↓
<body>
<div id="news" class="big-bg">
<header class="page-header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.svg"
alt="WCBカフェホーム"></a></h1>
<nav>
<ul class="main-nav">
<li>うか？試しにheightの数値をいじってもみましたが、画像がどんどん見切れるだけできれいには表示されませんでした
<a href="news.html">News</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<div class="wrapper">
<h2 class="page-title">News</h2>
</div>

<div class="news-contents wrapper">
<article>
<header class="post-info">
<h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
<p class="post-date">3/30 <span>2019</span></p>
<p class="post-cat">カテゴリー：お店の紹介</p>
</header>

該当すると思われる辺りのCSS↓
/* NEWS
-----------------------------------*/
#news{
background-image: url(../images/news-bg.jpg);
height: 270px;
margin-bottom: 40px;
}
#news .page-title{
text-align: center;
}

/* 記事部分　*/
article{
width: 60%;
order: 2;
}
.post-info{
position: relative;
padding-top: 4px;
margin-bottom: 40px;
}
.post-date{
background: #0bd;
border-radius: 50%;
color: #fff;
width: 100px;
height: 100px;
font-size: 1.625rem;
text-align: center;
position: absolute;
top: 0;
padding-top: 10px;
}
.post-date span{
font-size: 1rem;
border-top: 1px rgba(255, 255, 255, .5) solid;
padding-top: 6px;
display: block;
width: 60%;
margin: 0 auto;
}
.post-title{
font-family: "Yu Mincho","YuMincho",serif;
font-size: 2rem;
font-weight: normal;
}
.post-title,
.post-cat{
margin-left: 120px;
}

article img{
margin-bottom: 20px;
}
article p{
margin-bottom: 1rem;
}

無事解決致しました(-_-;)
divの閉じタグが一部抜けていました...
お騒がせしました

補足日時：2022/11/28 19:01
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： maho-maho
回答日時：2022/11/28 17:25

記事部分にヘッダーがあるのは何故でしょう？

<article>
<header class="post-info">
<h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
<p class="post-date">3/30 <span>2019</span></p>
<p class="post-cat">カテゴリー：お店の紹介</p>
</header>

- 0
- 件

通報する

この回答へのお礼

すいません、書籍を確認しましたが、そう書いてくれとしかなく、なぜかはハッキリとはわかりませんでした。

自分では記事部分の一番上の部分だからヘッダー？とか思ったのですが、
ネットを調べてみて、articleの下にheaderが来ることはおかしいことではないようで、また、headerが複数あることもあるようです。
素人調べなので正誤がわかりませんが...

ご確認いただき、ありがとうございました(´；ω；｀)

通報する

お礼日時：2022/11/28 18:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！