ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：meifa 定義リストの横並びと<DIV>要素の改行
困り度：
  • 困っています
 スタイルシートでテーブルのように横並びでレイアウトさせた定義リストの<dt>の内容にリンクを張っているのですが、
FirefoxとOperaで確認すると、リンク１とリンク２にカーソルを持っていってもカーソルの形が変わらず、クリックしても飛べません。
文字色はリンク用のスタイルシートを反映した色になっています。
スタイルシートの記述に問題があるのだと思うのですが、どこが悪いのかが分かりません。
アドバイス頂けると幸いです。

<dl id="sample">
<dt><a href="aaa.html">リンク１</a>
<dd>説明
<dt><a href="bbb.html">リンク２</a>
<dd>説明
<dt><a href="ccc.html">リンク３</a>
<dd>説明
<dt><a href="ddd.html">リンク４</a>
<dd>説明
</dl>


dl#sample {
margin-left: 1.5em;
float: left;
width: 450px;
padding: 1px 1px 0;
color: #000;
}

dl#sample dt {
float: left;
clear: both;
width: 70px;
margin-right: 10px;
margin-bottom: 1px;
padding: 2px 0 2px 2px;
}

dl#sample dd {
float: left;
width: 350px;
margin-bottom: 1px;
padding: 2px;
}

---------------------------------------

それともう一つ、
​http://jquery.andreaseberhard.de/toggleElements/​
このJavascriptを利用してDIV要素を開閉しているのですが、
DIV要素を以下のように二つ並べた場合
<div class="toggler-c" title="タイトル１">
<p>内容</p>
</div>
<div class="toggler-c" title="タイトル２">
<p>内容</p>
</div>
二つとも閉じた状態の時、改行せずに
タイトル１タイトル２
と表示されるのですが、これはスタイルシートの記述に問題があるからなのでしょうか。
質問投稿日時：08/04/06 01:03
質問番号：3925681
この質問に対する回答は締め切られました。

回答

良回答20pt
回答者：leap_day こんにちは

＞FirefoxとOperaで確認すると、リンク１とリンク２にカーソルを持っていってもカーソルの形が変わらず、クリックしても飛べません。

サンプルをそのままコピペして試してもどちらも可能なので他の部分に原因があると思われます

＞テーブルのように横並びでレイアウトさせた
＞文字色はリンク用のスタイルシートを反映した色になっています

記述されていないスタイルシートが関与しているのでサンプルからは確認できません（ * { }や a:link { } , a:hover { } など）
サンプルでは<dd>にデフォルトで40px程margin-leftがあるので
<dl>:width 450px
<dt><dd>:総width 476px位
となるので、2段にわたって表示されます

＞二つとも閉じた状態の時、改行せずに

downloadパックの中にある『toggleElements.css』の外部スタイルシートは読み込んでいますか?
改行表示させる為にはその中にある

.toggler { display:block; }

というのが必要です
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/06 07:25
回答番号：No.1
この回答へのお礼回答ありがとうございます。

すみません、人に訊く前に自分でサンプルのみでどう表示されるのか確認しておくべきでした。
ご指摘の通り、サンプルは問題ありませんでしたので、
他の部分も含めて一つ一つの宣言を確かめてみましたところ、
定義リストの入ったボックスの上に
psition: absolute;
で固定していたボックスのheightの数値にmargin-topの数値が足されて
見えない表示領域が定義リストの部分にまで被っていたためクリックできなかったようです。
高さの記述を全て削除したら解決されました。

サンプルのままだと２段に渡って表示されるのは、
CSSファイルのはじめにユニバーサルセレクタでマージンを解消しているので
今のところ意図した通りに表示されています。ご指摘ありがとうございます。

言われるまでdownloadパックの存在に気づきませんでした；；
(ソースを見ながらかなり強引に設定してました)
downloadパックを落としてみたのですが
『toggleElements.css』を全部読み込ませてしまうと
細かい設定変更がちょっと面倒でしたので、
教えて頂いた
toggler { display:block; }
だけ、現在使用しているCSSに入れました。
それで改行は出来たのですが、リンクの装飾で
a:hover{ color: #fff; background-color: #393;}
と記述しているため、オンマウスで行全ての色が変わってしまい見栄えが悪くなってしまうので
<DIV>要素と<DIV>要素の間に<br>を入れてしまいました。
表示はとりあえず問題ないんですが、文法？的にこれは大丈夫なのでしょうか？
(<DIV>要素は更に別の<DIV>要素でくくってあります)
 
このページのトップへ