- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：定義リストの横並びと<DIV>要素の改行）
定義リストの横並びと<DIV>要素の改行
このQ&Aのポイント
- 定義リストの<dt>要素にリンクを張っていますが、FirefoxとOperaでリンクが機能しない問題が発生しています
- スタイルシートの記述に問題がある可能性があります
- DIV要素を使って開閉する際に、改行せずにタイトルが表示される事象が発生しています
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは ＞FirefoxとOperaで確認すると、リンク１とリンク２にカーソルを持っていってもカーソルの形が変わらず、クリックしても飛べません。 サンプルをそのままコピペして試してもどちらも可能なので他の部分に原因があると思われます ＞テーブルのように横並びでレイアウトさせた ＞文字色はリンク用のスタイルシートを反映した色になっています 記述されていないスタイルシートが関与しているのでサンプルからは確認できません（ * { }や a:link { } , a:hover { } など） サンプルでは<dd>にデフォルトで40px程margin-leftがあるので <dl>:width 450px <dt><dd>:総width 476px位 となるので、2段にわたって表示されます ＞二つとも閉じた状態の時、改行せずに downloadパックの中にある『toggleElements.css』の外部スタイルシートは読み込んでいますか? 改行表示させる為にはその中にある .toggler { display:block; } というのが必要です
お礼
回答ありがとうございます。 すみません、人に訊く前に自分でサンプルのみでどう表示されるのか確認しておくべきでした。 ご指摘の通り、サンプルは問題ありませんでしたので、 他の部分も含めて一つ一つの宣言を確かめてみましたところ、 定義リストの入ったボックスの上に 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>要素でくくってあります)