ベストアンサー

ＣＳＳ　dlタグの背景色についての質問です

2009/07/02 23:06

cssで<dl>全体に背景色を指定しているのですが、firefoxとIE8は背景色がつきません。 IE6とIE7は背景色はつきましたが・・・どうしたらどのブラウザでも<dl>全体に背景色をつけることができるのでしょうか？どなたか教えていただけますでしょうか？よろしくお願い致しますｍ(_ _)ｍ

nishiura48
お礼率75% (15/20)

CSS
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

salonpath
ベストアンサー率48% (194/399)

2009/07/03 11:31 回答No.2

floatをそのまま使うと高さがなくなっちゃうんですよね、だから背景がみえない。試しにdlに border:1px solid #C30;を追加してみてください dlの上に2pxの赤いラインが引かれると思います、それが現在のdlのエリアです。 dlに背景を表示させるには高さが必要で、clearfixと呼ばれるテクニックを使うことで解決できます。 http://norisfactory.com/stylesheetlab/000038.php http://www.ixiell.net/2009/01/clearfix.html とりあえずそれを追加してfloatを包んでる親要素にclass="clearfix"を追加してみてください（今回だとdlに） *** スペースこう書いても dt { float: left; width: 200px; } こう書いても大丈夫 dt{float:left;width:200px;}

質問者

お礼 2009/07/03 21:44

ありがとうございます。わかりやすい説明、感謝いたします。 clearfixと呼ばれるテクニックは初めて知りました。色々教えていただきありがとうございましたｍ(_ _)ｍ

その他の回答 (3)

abril
ベストアンサー率69% (388/560)

2009/07/03 14:45 回答No.4

No.3です。すみません、参考リンクを一つ書き忘れました。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#leading-space-attribute 先ほどの参考先の説明は空要素の閉じ方についてのものですが、こちらの解説は属性の指定の記述についてですので、併せて参考にして下さい。

質問者

お礼 2009/07/03 21:38

なるほど・・よくわかりました。前からなんとなくでやってたのですっきりしました。本当にありがとうございますｍ(_ _)ｍ

abril
ベストアンサー率69% (388/560)

2009/07/03 14:40 回答No.3

質問の他の部分のお答えは出ていますので、残りだけ。 > HTMLの例えば　 > <img src="images/A.gif" width="100" height="100" /> > ↑ > "の後の半角スペースも必要なのか疑問です。こちらは原則必要ですね。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#leading-space-endtag-slash 上記の解説などを参考にして下さい。上記の半角スペースの意味と、CSSのセレクタで使用される「{」前や「:」「;」後の半角スペースの用途は違うという事です。

salonpath
ベストアンサー率48% (194/399)

2009/07/02 23:21 回答No.1

dt、ddにfloat使ってます？ htmlとcssを提示してください

質問者

補足 2009/07/03 02:45

はい使ってます。 HTML <body> <dl> <dt>aaa</dt> <dd>bbb</dd> <dt>ccc</dt> <dd>ddd</dd> <dt>eee</dt> <dd>fff</dd> </dl> </body> CSS * {margin: 0px;padding: 0px;} dl {width: 500px;｝ dt {float: left;width: 200px;｝ dd {float: left;width: 200px;} こんな感じです。お手間かけます。よろしくお願いします。もうひとつ前から気になってたことなんですが、CSSのコロンの後の半角スペース、*,dl,dt,ddのあとの半角スペースは必要なのですか？ドリームウィーバーで作っているのですが（xhtml-transitional）かってに半角スペースがついています。私は初心者なので、このへんのところがよくわかっておりません。編集したりした時に、半角スペースを必ずあけなければいけないのでしょうか？ HTMLの例えば　 <img src="images/A.gif" width="100" height="100" /> ↑ "の後の半角スペースも必要なのか疑問です。二つも質問してしまって申し訳ありません。もしご存知でしたら、教えていただけると助かります。よろしくお願い致しますｍ(_ _)ｍ