定義リスト dl dd dt

質問

困っています。お願いします。
このソースのレイアウトとしましては、
dl1、dl2、dl3と横に並んでいます。
各dtに画像、ddにテキストです。
このカタチが2行続いています。
3行目は、三列の一番左にdl7が置かれるかたちです。
全体としては、
dl1　dl2　dl3
dl4　dl5　dl6
dl7
という感じです。
dl1～dl7まで全て、同じサイズの画像とddにテキストが入っています。

問題はレイアウトではなく、リンクです。
dl1～dl7のdtの中の画像には全てリンクがはれるのですが、
dd部分の一部テキストにはリンクがはれません。
リンクがはれるのは、dl5、dl6、dl7です。
後はリンクを設定しても、リンクがはれない状態です。
いろいろ試してみたのですが、原因がわかりません。
一つ思うことは、dl1、dl2、dl3、dl4の下にはdl4、dl5、dl6があるわけなので、何か下にあるとリンクが効かないのかなあとも思います。
どなたか、教えて頂きたいです。
分かりづらい説明で申し訳ないのですが、宜しくお願い致します。

<dl id="dl1">
　　<dt id="dt1">
　　　　<a href="#"><img src="img/image1.jpg" /></a>
　　</dt>
　　<dd class="dd1">
　　　　<a href="#">ああああ</a>
　　</dd>
</dl>

<dl id="dl2">
　　<dt id="dt2">
　　　　<a href="#"><img src="img/image1.jpg" /></a>
　　</dt>
　　<dd class="dd1">
　　　　<a href="#">いいいい</a>
　　</dd>
</dl>

このカタチをdl7まで繰り返し、htmlに記述します。
次にcssです。

#dl1
{
position: relative;
width: 170px;
height: 170px;
padding: 10px 10px 0px 35px;
margin: 0px 0px 0px 0px;
float: left;
}

#dt1 a img
{
text-decoration: none;
border-style: none;
}

#dt1 a:hover img
{
visibility: hidden;
text-decoration: none;
border-style: none;
}

#dt1 a
{
display: block;
width: 170px;
height: 170px;
background-position:left top;
background-repeat:no-repeat;
text-decoration: none;
}

#dt1 a:hover
{
background-image: url(img/image1-2.jpg);
text-decoration: none;
}

こちらも同様に、dt7まで繰り返しcssを指定。
cssの中身は、画像にホバーしたら、画像が切り替わるようになっています。

次に、テキストのdd部分のcssです。
こちらはクラス指定で、dl1～dl7までの各dd使用。

.dd1
{
width: 170px;
height: 40px;
margin: 0px;
color: #ffffff;
font-size: 12px;
line-height: 16px;
padding: 0;
}

.dd1 a
{
padding: 0;
margin: 0;
text-decoration: none;
color: #ffffff;
}

.dd1 a:hover
{
text-decoration: underline;
color: #ffffff;
}

長々と失礼いたしました。

回答No.1

ORUKA1951 · ベストアンサー

なにかものすごく無駄な羅列・・・
CSS-カスケーディング(継承)スタイルシートそのものを理解できてないような・・デザインだけのためのidやclassを書くのはだめ。HTMLの<font>などが否定されているのと同じ理由。
<ol class="Imagelist">
　<li>
　　<dl>
　　　<dt><a href=""><img></a></dt>
　　　<dd></dd>
　　</dl>
　</li>
　<li>
　　<dl>
　　　<dt></dt>
　　　<dd></dd>
　　</dl>
　</li>
・・・・
　<li>
　　<dl>
　　　<dt></dt>
　　　<dd></dd>
　　</dl>
　</li>
</ol>

CSS
ol.Imagelist{
　display:block;
　width:600px; /*できれば%指定
　color: #ffffff;
　font-size: 12px;　
}
ol.ImageList li{
　display: block;
　float: left;
　width: 170px;
　height: 40px;
　padding: 0px;
　margin: 0px;
　line-height: 16px;
}
ol.ImageList li dl dd{}
ol.ImageList li dl dt img{}
ol.ImageList li dl a{}

とでもして、CSSなしで動作確認すること。その上でCSSでデザインしていきますが、CSSのCSSたる所以の継承や詳細度、優先順位をきちんと理解していれば、解決するはず。

お礼

遅くなってしまい、申し訳ございません。
参考にさせていただき無事、解決できました。
ありがとうございました。