• ベストアンサー

webデザイン, コーディング

webサイトのコーディングをしています。下のようなコーディングをしているのですが、div内に指定したbackgroundが<dl>内に反映されません。何故かわかりません。原因が分かる方教えてください！ <div style="background: url(....) repeat;"> <dl> <dt style="float: left">title</dt> <dd style="float: right">contents</dd> </dl> </div>

  • HTML
  • 回答数2
  • ありがとう数0

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

  • ベストアンサー
  • mat-21
  • ベストアンサー率56% (91/162)
回答No.2

<dt>と<dd>がfloatしているので、そのような現象がおきます。 floatしている<dt>と<dd>をclearしなければなりません。 よって、以下のようにすれば一応解消されるけど.... <div style="background: url(....) repeat;"> <dl> <dt style="float: left">title</dt> <dd style="float: right">contents</dd> </dl> <br style="clear: both"> </div> 上記ですと、<br>分隙間が出ます。 ですので、<br>のstyleを <br style="clear:both; font-size:0px; line-height:0px;"> という風に理屈ではそうですが、ブラウザで確認していないので、 あしからずです。。。

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

clearしていないから divが空状態になので認識されない・・・ clear方法はコンテンツやブラウザによって各種あります。 調べましょう。 誰もが必ず間違えるところですｗ

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

関連するQ&A

  • 自作の一段組みのソースを使い、二段組みのサイトを

    作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 以下がソースです。なお、所々、一段組みのソースのままになっているところがあり、かつ、かなり長いですが、ご了承ください。最終的には、サイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。 ～html～ <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1 style="display:none">タイトル</h1> <ul id="topmenu"> <li class="logo1"><a href="#">お問い合わせ</a></li> <li class="logo2"><a href="#">サイトマップ</a></li> </ul> </div> <!-- サイドメニュー (スワップイメージを使っています)--> <div id="menu"> <ul> <li><a href="#"><img src="images/button/top.jpg" alt="トップページ" width="254" height="71"id="Image1" onmouseover="MM_swapImage('Image1','','images/button/sw-top.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> <li><a href="#"><img src="images/button/eve.jpg" alt="トップページ" width="254" height="71"id="Image2" onmouseover="MM_swapImage('Image2','','images/button/sw-eve.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> 　　　　　　　　※以下省略 </ul> <div> <!--main--> <div id="main"> <div id="introduction"> <h2><img src="images/introduction.png" alt="introduction" /></h2> </div> <!-- コンテンツ --> <div id="content"> <h2>h2タイトル(1)</h2> <dl class="info"> <dt>1月1日</dt> <dd>あああ</dd> <dt>1月2日</dt> <dd>いいい</dd> ※以下省略 </dl> <h2>h2タイトル(2)</h2> <dl class="info"> <dt>1月1日</dt> <dd> ううう</dd> <dt>1月2日</dt> <dd>えええ </dd> ※以下省略 </dl> </div> <!--contentsはここまで--> </div> <!--mainはここまで--> <!-- フッター --> <div id="footer"> <ul id="lastmenu"> <li class="logo3"><a href="#">よくある質問</a></li> <li class="logo4"><a href="#">プライバシーポリシー</a></li> </ul> <p>Copyright BBB. All right reseved.</p> </div> </div> <!--containerはここまで--> ～css～ body {background-image: url(images/sora.jpg)} /* コンテナ */ div#container {background-image: url(images/background0.png); width: 980px; margin-left: auto; margin-right: auto; overflow:hidden; position:relative} /* ヘッダー */ div#header {background-image: url(images/header.png); background-repeat:no-repeat; height: 169px; margin-bottom: 30px} ul#topmenu {font-size: 1.2em; padding-left: 580px; padding-top: 130px} ul#topmenu li {float:left; margin-left:15px; margin-right:15px; font-weight:bold} .logo1 {list-style:none; background-image: url("images/mail.png"); background-position: left center; background-repeat: no-repeat; padding-left:35px} . logo2 { list-style:none; 　　　　　height:25px; 　　　　　background-image: url("images/zisyaku.png"); 　　　　　background-position: left center; background-repeat: no-repeat; padding-left:30px } /* メニュー */ #menu {margin-left: 40px; width:260px} #menu li{list-style:none; margin-bottom: 4px} /* メイン　*/ div#introduction {margin-left: 132px; margin-bottom: 10px} /* コンテンツ */ div#content {width: 475px; border: 2px solid #400000; padding-top: 28px; padding-right: 60px; padding-left: 50px; padding-bottom: 20px; margin-left: 135px; margin-bottom: 80px; font-weight: none;} div#content h2 {color: #400000; font-size: 1.8em; letter-spacing: 0.5em; border-bottom-width: 3px; border-left-width: 14px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #008080; border-left-color: #008080; padding-left: 10px; margin-bottom: 15px} dl.info dt,dl.info dd {font-size:1.2em; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #400000} dl.info dt {clear: left; float: left; padding-left: 17px; color: #000; width:8.2em; background-image: url("images/yazirusi2.gif"); background-position: 0% 58%; background-repeat: no-repeat;} dl.info dd {margin-bottom: 0.8em; margin-left: 9.2em; margin-bottom: 1.5em} /*メインはここまで*/ /* フッター */ div#footer {background-image: url(images/footer.gif); position:absolute; bottom:0px; height:60px; width:980px;} ※以下省略。 　　　　　　　　　

    • ベストアンサー
    • CSS
  • CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一

    CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一部反映されません。 詳しい方ご教授願います！！ ・スクロールバーが出ずに指定した高さを超えてデカデカと表示される ・ボックスを囲む線が表示されない ・その他の設定（余白、色、フォント・・・）は指定通り表示される 外部CSSの記述は下記の通りです。 ----------------------------------- #main dl.info { height: 130px; overflow: auto; margin-right: auto; margin-left: auto; padding: 10px; border: 1px solid #cccccc; margin-bottom: 1em; } #main dl.info dt { font-weight: bold; float: left; } #main dl.info dd { border-bottom: 1px solid #cccccc; padding-left: 8em; } ----------------------------------- ちなみに、mainは下記の通りです。 ----------------------------------- #main { float: left; margin-top: 20px; margin-left: 40px; width: 500px; } #main h2 { font-size: 110%; background-image: url(images/h2bg.gif); background-repeat: no-repeat; background-position: bottom; padding-left: 10px; color: #696969; clear: both; } #main p { padding: 2px; } ----------------------------------- htmlファイルへの記述は下記の通りです。 ----------------------------------- <div id="main"> <h2>更新情報</h2> <dl class="info"> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> </dl> </div> <!--/main--> ----------------------------------- いくら見直しても書き直してみても、直りません・・・ きっと私がどこか抜けているか間違っているのだと思うのですが・・・ 宜しくお願い致します！

  • inlineでテキストの入ったボックスを横に並べる

    いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1～6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします！！ <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • コーディングで「float」のclearの仕方

    htmlとcssのコーディングに関して質問させてください。 右側と左側にボックスをフロートさせた際、 どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか？ 分かりにくいかもしれませんがご教授いただければ幸いです。

  • タグ　リストについての質問です。（超初心者です）

    タグ　リストについての質問です。（超初心者です） リストについてなのですが、複数のリストに複数のスタイルを設定したいのですができません。 何が悪いのか教えて下さい。また解決方法も教えて下さい。 ホームページ作成の初心者です。悪戦苦闘しながら作成しています。 タグについてyahoo知恵袋や教えて!gooなどたくさん調べたつもりなのですが、分かりません・・・ 教えて下さい。 複数のリストに各々スタイルを指定したいのですが、２つめのリストに反映されません。 スタイルシートで作成しているのですが・・・ どのようにしたら良いのでしょうか？ == HTMLは、下記のような形 == <div id="main"> ・ ・ ・ <div id="navigation"> <dl id="navi"> <dt>野菜の種類</dt> <dd><a href="#">キャベツ</a></dd> <dd><a href="#">にんじん</a></dd> </dl> <dl id="navi2"> <dt>車の種類</dt> <dd><a href="#">セダン</a></dd> <dd><a href="#">ワゴン</a></dd> </dl> </div> ・ ・ ・ </div> == CSSは、下記のような形 == #navigation dl#navi { background: #999999; } #navigation dl#navi dt { margin: 0 0 1px; } #navigation dl#navi dd { background: url(bg_01.png) no-repeat; } #navigation dl#navi dd.first { padding-top: 14px; background-position: 0 -1px; } #navigation dl#navi dd a { color: #000000; text-decoration: none } #navigation dl#navi dd a:hover { color: #A6FF28; } #navigation dl#navi2 { background: #FFFF66; } #navigation dl#navi2 dt { margin: 0 0 1px; } #navigation dl#navi2 dd { background: url(bg_01.png) no-repeat; } #navigation dl#navi2 dd.first { padding-top: 14px; background-position: 0 -1px; } #navigation dl#navi2 dd a { color: #000000; text-decoration: none } #navigation dl#navi2 dd a:hover { color: #CC0033; } 上記のような形で、<dl id="navi2">のスタイルが適用されません・・・ なぜでしょうか？ ちなみに<dl id="navi">はちゃんと反映します。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 定義リストで先頭にアイコン

    先頭にアイコンをつけたいのですが、テキストが重なってしまいます。 できれば下記のように定義リストで実現したいです。 .qaarea dl { margin: 1em; padding: 0; } .qaarea dt { font-weight: bold; color: #035AA3; background: #CCCCCC url(../qa_img/q_back.gif) no-repeat left center; padding: 5px; } .qaarea dd { background: #FFFFFF url(../qa_img/a_back.gif) no-repeat left top; padding: 5px; margin: 10px 0 10px 50px; } ------------- <div class="qaarea"> <dl> <dt>質問が入ります。</dt> <dd>回答が入ります。</dd> </div>

    • ベストアンサー
    • HTML
  • スタイルシートで背景の繰り返しができない

    スタイルシートで背景の繰り返しができない <div id="main"> <div id="navi"> <table> <tr> *** </tr> <tr> *** </tr> </table> </div> <div id="contents"> <table> <tr> *** </tr> <tr> *** </tr> </table> </div> </div> というHTMLで、スタイルシートの内容は #main{ margin-left: 60px; background-image: url("image/bg.png"); background-repeat: repeat-y; padding: 20px; white-space: nowrap; } #navi{ width: 300px; float : left; } #contents{ width: 389px; float :left; } としていますが、背景画像の繰り返しができません。 なにが原因なのでしょうか？ 間違いがありましたら教えていただけないでしょうか。

    • ベストアンサー
    • CSS
  • CSSで背景色のwidthが指定できません。

    WebサイトのQ&Aのページを<dl>要素を使って作成しています。 質問項目には、background-imageだけを使い、 回答項目には、background-imageとbackground-colorを使っております。 それぞれの回答項目のbackground-colorのwidthを592pxで統一したいのですが、できません。 回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。 かれこれ4時間くらい格闘しておりますが、きちんと表示できません。 ちなみに、dl、dt、ddの要素のうち、marginとpaddingはリセットCSSをしています。 以下に、該当するHTMLとCSSだけ書きました。 何がいけないんでしょうか？ もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？ <!-- HTML --> <dl> <dt class="questiontext_dt">ここで質問</dt> <dd class="question?dd">ここで回答してます</dd> </dl> /* CSS*/ .questiontext_dt { width:592px; padding: 0px 0px 0px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; text-align: left; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; } .questiontext_dd { width:592px; padding: 5px 0px 5px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background-color: #f5eabc; background-image:url(http://www.ok.com/img/question2.gif); background-position: left 5px; background-repeat: no-repeat; }

    • ベストアンサー
    • CSS
  • 定義リストの横並びと<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> 二つとも閉じた状態の時、改行せずに タイトル１タイトル２ と表示されるのですが、これはスタイルシートの記述に問題があるからなのでしょうか。

    • ベストアンサー
    • HTML
  • CSSでフローとした際の親要素の高さ

    CSSでfloatしたものって、親要素のheightに反映されません？ただ親要素に背景があって、反映されないと凄く困る感じで・・・。 それってどうやって回避すればいいでしょうか？ 取りあえず <div style="width:750px;background:url(mainback.gif)"> <div style="float:left;width:300px;">左側</div> <div style="float:right;width:450px;">右側</div> <br style="clear:both;"> </div> のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、 なにか良い逃げ方ってないでしょうか？？ ご存知の方、宜しくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する