• ベストアンサー

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

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

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

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

  • ベストアンサー
  • salonpath
  • ベストアンサー率48% (194/399)
回答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;}

nishiura48
質問者

お礼

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

その他の回答 (3)

  • abril
  • ベストアンサー率69% (388/560)
回答No.4

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

nishiura48
質問者

お礼

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

  • abril
  • ベストアンサー率69% (388/560)
回答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)
回答No.1

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

nishiura48
質問者

補足

はい使ってます。 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" /> ↑ "の後の半角スペースも必要なのか疑問です。 二つも質問してしまって申し訳ありません。 もしご存知でしたら、教えていただけると助かります。 よろしくお願い致しますｍ(_ _)ｍ

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 背景色が出ません。

    CSSで bodyに背景画像、 wrap全体にbackgroundで色の指定、 wrapの中のdivにもbackgroundで色の指定をしていますが、divのbackground色が出てきません。 wrapの指定色が利いたままです。 ブラウザはFirefoxです。 IEでは問題ないのですが・・・。 どのようにしたら、Firefoxでもbackgroundの色が利くようになりますか？

    • ベストアンサー
    • HTML
  • CSSで「html」にも背景指定をするのはどのような場合？

    CSSで「html」にも背景指定をするのはどのような場合？ CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか？ もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる？と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。

    • ベストアンサー
    • CSS
  • 背景をＣＳＳで

    背景の色や壁紙をＣＳＳで指定したいのですがＣＳＳでの指定の仕方がわかりません。 ＨＴＭＬの<body background=>ならわかるんですが どうしてもＣＳＳで指定したいのでＣＳＳでの指定のはわかりましたら教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • firefoxとIEの背景画像の位置を合わせる

    背景画像の中央にテキストがくるよう指定するのに、CSSでline-heightで調整しています。 firefoxではピタリと中央にきますが、IEだと少しずれます。 paddingで調整するとIEだと中央にきますが、firefoxだと少しずれます。 両ブラウザー共にテキストを中央配置する方法を教えてください。 よろしくお願いします。

  • CSSで、テキストのみの背景色を指定するには？

    CSSで、テキストのみの背景色を指定するには？ ＣＳＳを使って、 h1 { color: orange; background: green; } とすると、<h1>タグで示されたテキストの行の背景色が緑色になりますが、 行全体ではなく、テキストのみの背景色を指定するにはどうすればよいでしょうか？

  • CSSハックの使い方を教えてください

    CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか？ 実際の記述方法を教えていただけないでしょうか？ 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか？ #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }

    • ベストアンサー
    • HTML
  • ＣＳＳでの背景の指定について質問いたします。

    ＣＳＳでの背景の指定について質問いたします。 background: url(../img/bg.gif) 0 -36px repeat-y; この場合の、0　-36px　はどのような意味ですか？ 背景画像の位置の指定なのでしょうが、具体的にどのように指定しているものなのか 教えていただけませんか？ よろしくお願いいたします。

  • html、CSS、画像を一気にDLする方法

    html、CSS、画像、js等を一気に取得できる方法はありますでしょうか。 windowsですが、ウェブサイトの情報を一気に取得する方法はありますでしょうか。現在は、Ctl + S の「名前をつけて保存」にて、ウェブ情報を取得しておりますが、CSSの一部やCSS内の背景画像は取得できません。 Linuxでは確かできると思うのですが。 特に、CSSの背景画像がすべてDLできれば問題ありません。 Firefox Firebugや、googleのdeveloper tool等でも可能ですが、一つずつ取得していかないといけないので、他の方法があると幸いです。

  • 背景画像表示について

    CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px; 　　　　　height : 1000px; 　　　　　top : 1px; 　　　　　left : 2px;position : absolute; 　　　　　background-image: url(****.gif); 　　　　　z-index: 1; 　　　　　visibility : visible; 　　　　　" id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした

    • ベストアンサー
    • HTML
  • <tr>タグ、<td>タグ

    テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。 (1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。 (2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する