ｄｌ,ｄｄ要素の位置の調整

Question

前提・実現したいこと

LP模写をしています。
dd要素の中に入れたh3[新年を新たな気持で迎える・・・]のタイトル部分を下の内容文と始めを同じにしたいです。
dd部分のCSSはネットで同じようなマークアップをコピペしました。なのでh3部分のみ反映されないのですがよく原因がわかりません。

ちなみにliで記事一覧のようにしようと思っています。
できればシンプルなマークアップをしたいのですがなにかご指摘いただけたらうれしいです。
当方初心者のためおてやわらかにしていただけると助かります。

html

<div id="news_wrapper">
  <div id="news_title">
    <h2>NEWS</h2>
    <div id="news_link">
     <a href="#">MORE</a>
  </div><!-- news_link -->
  </div> <!-- news_title -->
 <ul>
  <li>        
    <dl>
     <dt>
       <img src="image/2021 happy new year.jpg" alt="#">
     </dt>
     <dd>
       <h3><a href="#">新年を新たな気持で迎える！PAS-POLより、人気商品が詰まった「選べる」福袋の発売がスタート</a>
              </h3>
       <span>2020.12.10</span>
       <p>今年は、いろんなことがあった1年でした。2021年は、もっと笑ってもっと楽しむ1年に。 世界の旅先に想いを馳せて、日本の魅力を再発見した2020年。旅ができることは当たり前じゃなかった。そんなことを気付かされた年になりました。 来年こそは、徐々に国内外を自由に行き来することができますように。 未来への予定を立てたり、絶景を眺めながらあこがれの場所や再訪したい場所をピックアップしたり。ワクワクした気持ちになって新たな気持で新年を迎えられるPAS-POLグッズを詰め込み、2種類の福袋をご用意いたしま ...</p>
     </dd>
    </dl>
  </li>
 </ul>
</div><!-- news_wrapper -->

CSS

/* ========================================
    NEWS
========================================= */
div#news_wrapper {
  width:  auto;
  height: 1333px;
  background-color: #f6f6f6;
  margin: 0 auto;
  padding: 109px 416px 127px 416px;
}
div#news_title {
  /* background-color: green; */
  width: 817px;
  height: 48px;
  float: left;
  margin-bottom: 63px;
}
div#news_title h2 {
  font-size: 30px;
  display: inline-block;
  background: url(image/[e-mail]) no-repeat left bottom;
}

div#news_link {
  border: 1px solid #000;
  height: 46px;
  width: 162px;
  background: url(image/[e-mail]) no-repeat;
  background-position: 141px center;
  float: right;
}
div#news_link a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 46px;
  text-align: center;
  display: block;
}
div#news_wrapper ul li  {
  display: inline-block;
  width: 920px;

  position: relative;
  z-index: 1;
}
div#news_wrapper ul li dl dt {
  margin-right: 28px;
  float: left;
}
div#news_wrapper ul li dl dt img {
  height: 146px;
  width: 322px;
  
}
div#news_wrapper ul li dl dd {
  height: auto;
  width: calc(100% - 463px);
  float: left;
}
div#news_wrapper ul li dl dd h3 a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  letter-spacing: 0.03em;

  position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
div#news_wrapper ul li dl dd h3 a:hover {
  filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

div#news_wrapper ul li dl dd span {
  font-size: 12px;
  color: #656c6e;
}
div#news_wrapper ul li dl dd p {
  font-size: 13px;
  color: #656c6e;
  letter-spacing: 0.09em;
}

Answer 1

この構成なら、dlリストは不要ですね。自分なら Flexbox を使い、こんな感じにします。
ざっくりなので装飾なし、レスポンシブ対応やブラウザ互換はバッチリじゃないですが。

<style>
  .news { outline: 1px dotted red;
    max-width: 44.75em;
    padding: 1em 2em;
  }
    .news__title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
      .news__title h2 {
        margin-top: 0;
      }
    .news ul {
      padding-left: 0;
    }
      .news__item {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }
      .news__item:not(:first-child) {
        margin-top: 2em;
      }
        .news_item__content {
          order: 1;
        }
        .news_item__img {
          order: 0;
        }
        .news_item__img img {
          max-width: 100%;
        }

      @media (min-width: 768px) { /* デスクトップ表示 */
        .news__item {
          flex-direction: row;
        }
          .news_item__content {
            width: 60%;
          }
          .news_item__img {
            width: 35%;
          }
      }
</style>

<div class="news">
  <div class="news__title">
    <h2>NEWS</h2><a href="#">MORE</a>
  </div>
  <div class="news__body">
    <ul>
      <li class="news__item">
        <div class="news_item__content">
          <h3><a href="#">新年を新たな気持で迎える！PAS-POLより、人気商品が詰まった「選べる」福袋の発売がスタート</a></h3>
          <span class="news__item__date">2020.12.10</span>
          <p>今年は、いろんなことがあった1年でした。2021年は、もっと笑ってもっと楽しむ1年に。 世界の旅先に想いを馳せて、日本の魅力を再発見した2020年。旅ができることは当たり前じゃなかった。そんなことを気付かされた年になりました。 来年こそは、徐々に国内外を自由に行き来することができますように。 未来への予定を立てたり、絶景を眺めながらあこがれの場所や再訪したい場所をピックアップしたり。ワクワクした気持ちになって新たな気持で新年を迎えられるPAS-POLグッズを詰め込み、2種類の福袋をご用意いたしま ...</p>
        </div>
        <p class="news_item__img"><img src="http://dummyimage.com/600x400/CCC/fff.png&text=代替テキスト"></p>
      </li>
      <li class="news__item">
        <div class="news_item__content">
          <h3><a href="#">新年を新たな気持で迎える！PAS-POLより、人気商品が詰まった「選べる」福袋の発売がスタート</a></h3>
          <span class="news__item__date">2020.12.10</span>
          <p>今年は、いろんなことがあった1年でした。2021年は、もっと笑ってもっと楽しむ1年に。 世界の旅先に想いを馳せて、日本の魅力を再発見した2020年。旅ができることは当たり前じゃなかった。そんなことを気付かされた年になりました。 来年こそは、徐々に国内外を自由に行き来することができますように。 未来への予定を立てたり、絶景を眺めながらあこがれの場所や再訪したい場所をピックアップしたり。ワクワクした気持ちになって新たな気持で新年を迎えられるPAS-POLグッズを詰め込み、2種類の福袋をご用意いたしま ...</p>
        </div>
        <p class="news_item__img"><img src="http://dummyimage.com/600x400/CCC/fff.png&text=代替テキスト"></p>
      </li>
    </ul>
  </div>
</div>

Comments

[chapman]

回答ありがとうございます！この場合、dlではなくFlexbox にする理由を教えていただきたいです。シンプルになるからでしょうか・・？

[takna]

li > dl と入れ子にする理由がないという意味でした。
float や絶対配置よりシンプルに書けるので Flexbox を使いました。
質問に「シンプルなマークアップ」とあったので、レスポンシブで合理的なコードにした次第です。
解決済みとなっているコードを何が違うか考察いただければ幸いです。

Answer 2

dd部分のCSSはネットで同じようなマークアップをコピペしました。なのでh3部分のみ反映されないのですがよく原因がわかりません。

意味もわからずコピペしているだけでは、何の進歩もありません。

CSSから、h3に関係する部分を探すと、

div#news_wrapper ul li dl dd h3 a {
   (略)
}

div#news_wrapper ul li dl dd h3 a:hover {
  (略)
}

の2箇所だけですね。さらに、下のa:hoverが付いているほうは、ホバー時の設定なので今回の問題とは関係ありません。

div#news_wrapper ul li dl dd h3 aに対するスタイルの内容を見ると、position: absolute;やright: 0;といった設定がされていますね。これらの意味を調べて、削除するなり修正するなりすれば、あなたの思い通りの表示になります。

Comments

[chapman]

position: absolute と　relativeを削除すると希望通りの場所に配置できました！ありがとうございます！