画像の下に要素が重なってしまいます。

Question

画像の下にサブのナビゲーションを作成したいのですが、
トップ画像の下にナビゲーションが入り込んでしまいます。

<div id="top-wrapper">
   <div class="top-image">
        <div>
             <img src="./images/staypageimg/topimage.jpg">
        </div>
   </div>
</div>

<div id="sub-navigation">
    <ul>
        <li><a href="#">宿泊プラン</a></li>
        <li><a href="#">客室紹介</a></li>
        <li><a href="#">朝食のご案内</a></li>
        <li><a href="#">夕食のご案内</a></li>
        <li><a href="#">ルームサービス</a></li>
    </ul>
</div>

#top-wrapper{
      padding:0;
      width: 100%;
      position: relative;
      height: 633px;
  }
  
.top-image img{
      display: flex;
      justify-content: center;
      align-items: center;
      width:100%;
  } 

#sub-navigation ul li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    table-layout: fixed;
    width: 10%;
    min-width: 50px;
    list-style-type: none;
    color: #5f5f5f;
    transition: color 0.3s;
    border-right: 1px solid #aeaeae;
    border-left: 1px solid #aeaeae;
    background-color: #ececec;
    margin-bottom:0 ;
}

#sub-navigation li+ li{
    border-left:0;
    border-right: 1px solid #aeaeae;
}

#sub-navigation ul li:hover {
  border-bottom:4px solid #22224d;
    transition: 0.3s;
}

#sub-navigation ul li a {
    display: block;
    color: #5f5f5f;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    padding: 8px 0;
}

こちらの質問を見つけて試しましたがダメでした。
https://teratail.com/questions/154402

そしてずうずうしいのを承知でもう一つ質問をさせていただくのですが、
ナビゲーションの背景の色を画面いっぱいにするにはどうしたらいいのでしょうか。。
.sub-navigation　に　background-color を指定して、width：100%にするのかなと思い試してみましたがダメでした。。

初歩的な質問で大変恐縮ですが、よろしくお願いいたします。

Comments

[Jon_do]

貼り付けられたコードに画像が有りません。
画像の幅や高さ、画像を囲んでいるコードなど情報が足りませんので修正をオススメします。

[sanayaaan]

ご指摘ありがとうございます。
追加させていただきました。

Answer 1

Daregadaさんの回答に追加で、

/*
#top-wrapper {
  padding: 0;
  width: 100%;
  position: relative;
  height: 633px;
}
*/

.top-image img {
  /*
  display: flex;
  justify-content: center;
  align-items: center;
*/
  width: 100%;
  height: 633px;
  object-fit: cover; /* これを追加 */
}

/* 追加 */
#sub-navigation ul {
  background-color: #ececec;
}

(以下略)

---

ただ、背景画像なら、imgタグではなく、cssの background-image で表示させる方法をお勧めします。

#top-wrapper {
  padding: 0;
  width: 100%;
  position: relative;
  height: 633px;
  background-image: url(./images/staypageimg/topimage.jpg);
  background-size: cover;
}

/* 追加 */
#sub-navigation ul {
  background-color: #ececec;
}

imgタグだと画像のゆがみを防ぐために、object-fit が必要ですが、IEは非対応。
background-image だと、background-size: cover; ですが、これはIEでも対応。

追記

コメントより

ちなみにお教えいただいたbackground-imageにて背景画像を指定した場合、背景画像の上にもう一枚小さな画像を重ねて中央表示をさせるにはどのようにしたらいいかご存知でしょうか。

background-* プロパティは , で区切って複数設定できます。
例えば、背景画像を領域全体に表示させて、縦横150pxの画像を中央に表示させる場合は下記のようにななります。

#top-wrapper {
  padding: 0;
  width: 100%;
  position: relative;
  height: 633px;
  background-image: url(./images/staypageimg/150x150.png),
                    url(./images/staypageimg/topimage.jpg);
  background-size: 150px 150px ,cover;
  background-repeat: no-repeat;
  background-position: center;
}

background で各background-* プロパティをまとめて設定することもできます。

#top-wrapper {
  padding: 0;
  width: 100%;
  position: relative;
  height: 633px;
  background: center/150px 150px  no-repeat  url(./images/staypageimg/150x150.png),
              center/cover no-repeat url(./images/staypageimg/topimage.jpg);
}

Codepenサンプル

background - CSS: カスケーディングスタイルシート | MDN

Comments

[sanayaaan]

ご回答ありがとうございました！大変助かりました。
ちなみにお教えいただいたbackground-imageにて背景画像を指定した場合、背景画像の上にもう一枚小さな画像を重ねて中央表示をさせるにはどのようにしたらいいかご存知でしょうか。もしお分かりになりましたらお教え頂けますと幸にございます。次から次へとすみません。

[hatena19]

回答に追記しましたのでご参照ください。

[sanayaaan]

ご丁寧にありがとうございました。感謝いたします。

Answer 2

/*
#top-wrapper {
  padding: 0;
  width: 100%;
  position: relative;
  height: 633px;
}
*/

.top-image img {
  /*
  display: flex;
  justify-content: center;
  align-items: center;
*/
  width: 100%;
  height: 633px;
}

/* 追加 */
#sub-navigation ul {
  background-color: #ececec;
}

(以下略)

Comments

[sanayaaan]

ご回答ありがとうございました。おかげさまで無事解決することができました。大変助かりました。