dlタグに背景画像が表示されない問題

このQ&Aのポイント
  • Dreamweaverで制作したdlタグ内の背景画像がサーバにあげても表示されない問題が起きています。
  • 背景画像以外のCSSは反映されているので、なぜ背景画像が表示されないのか疑問です。
  • このような問題には、URLの指定方法や画像のパスの設定などが関係している可能性があります。
回答を見る
  • ベストアンサー

li dl 背景画像が消えてしまう

listタグ内のdlタグに背景画像をつけました。 Dreamweaverで制作していて、ブラウザ確認(IE/firefox)すると問題ないのですが、いざサーバにあげてみると、IE/firefoxともに背景画像が表示されません。 背景画像以外のcssは反映されていました。 こんなことってあるのでしょうか? 【html】 <ul id="bkn_r"> <li><img src="../../images/bkn_fr_r01.jpg" border="0"></li> <li><dl id="bkn_no"> <dt>番号</dt> <dd>YAT-001</dd> <dt>担当者</dt> <dd>××××</dd> </dl></li> <li><dl id="tel"> <dt><img src="../../images/bkn_fr_r02.jpg" alt="*"></dt> <dd id="tel_no">××</dd> </dl></li> </ul> 【css】 ul#bkn_r { list-style-type: none; padding: 0; margin: 0; } ul#bkn_r li img{ font-size:0; line-height:0; vertical-align: top; padding: 0; margin: 0; } #bkn_no { background-image: url(../images/bkn_fr_rbg01.jpg); background-repeat: repeat-y; padding-left: 30px; margin: 0px; width: 200px; } #tel { background-image: url(../images/bkn_fr_rbg02.jpg); margin: 0px; } #tel_no { font-weight: bold; color: #CC0000; font-size: 1.2em; letter-spacing: 0.03em; } #bkn_no dd { font-weight: bold; font-size: 1em; margin-left: 10px; margin-top: 0px; }

noname#93029
noname#93029
  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.1

ローカルでのブラウザ表示に問題がないのなら、画像がアップロードされていないか、画像のURLが間違っているかじゃないですか。 全てソフト任せでアップロードしているなら考えにくいけど…。

noname#93029
質問者

お礼

仰るとおりでした。 画像アップし忘れてました。 まぬけな質問で大変失礼しました。 でも、気づかせていただいて助かりました。ありがとうございます。

関連するQ&A

  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

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

    作っているのですが、サイドメニューまでは、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
  • Liで背景画像が表示されない (Safari、Operaにて)

    こんにちは。 同じような質問が続いていますが、違うものでございます。 以下のようなcssを組んだのですが、なぜかSafari、Operaでは文頭の画像が表示されません。 (ちなみに画像は幅4px、高さ5px) なぜかお分かりになる方がいらしたら、教えていただければと思います。 #box { width: 160px; color: #333333; background-color:#ffffff; border-right:1px solid #333333; border-top:2px solid #CC0033; } #box ul { list-style:none; margin:0 0 2px 0; padding:0 0 0 1.2em; line-height:1.7; } #box ul li { margin:0px; padding:0 0 0 0.8em; font-size:75%; color: #CC0033; background-color: #FFFFFF; background: 0 url(../images/pt-sub.gif) no-repeat 0.5em; border-bottom:1px dotted #aaaaaa; list-style:none; }

    • ベストアンサー
    • HTML
  • ul、dlタグでリストを作成すると行間に余白が

    とても基本的な質問なのですが、どなたか教えて頂けると助かります。 ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。 この余白を消したいのですが、どうすれば宜しいでしょうか? ■htmlの記述 <ul> <li>画像1</li> <li>画像2</li> <li>画像3</li> </ul> <dl> <dt>画像1-1</dt> <dd>画像1-2</dd> <dt>画像2-1</dt> <dd>画像2-2</dd> <dt>画像3-1</dt> <dd>画像3-2</dd> </dl> ■CSSの記述 #ul{ margin:0; padding:0; line-height:0; list-style:none; } #ul li{ margin:0; padding:0; line-height:0; } #dl{ margin:0; padding:0; line-height:0; list-style:none; } アドバイスをどうぞ宜しくお願いします。

    • 締切済み
    • Mac
  • Liで背景画像が表示されない

    よく見かけるLiでナビゲーション項目を表示させるのを しようとしているんですが、Liの背景画像が上手く表示されません。 navigationの背景画像は表示されたのですが、liで指定した 背景画像が表示されません。 どこが悪いのでしょうか?? 初歩的な事かもしれませんが、よろしくお願いします。 #navigation { WIDTH: 900px; height:50px; background: url(./h_side.jpg); background-position: left top; text-align:left; ul { margin: 0px; padding: 0px;} li { display: block; } .menuA01 { width: 178px; height:50px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; text-decoration: none, background : url(./menuA01.jpg); background-position: left top; float: left; <div id="navigation"> <ul> <li class="menuA01"><a href="/index.html">menuA01</a></li> <li class="menuA02"><a href="/index.html">menuA02</a></li> <li class="menuA03"><a href="/index.html">menuA03</a></li> <li class="menuA04"><a href="/index.html">menuA04</a></li> <li class="menuA05"><a href="/index.html">menuA05</a></li> </ul> </div>

  • HTML dlについて

    HTML初心者です。 下記をdlタグで定義したいんですがどういう方法がいいんでしょうか? 入れ子にして作ったんですがどうも長ったらしいのでもっと完結にしたいんですが・・・・ うまく全部を関連付ける方法を教えて下さい。 <dl> <dt><ul> <li>1と2と3の題名</li></dt>   <dd> <li> <dl> <dt>題名1</dt></li>   <li><dd>内容1</dd></li>   <li><dt>題名2</dt></li>   <li><dd>内容2</dd></li>   <li><dt>題名3</dt></li>   <li><dd>内容3</dd></dl></li> </dl> </ul> </dd> </dl>

    • ベストアンサー
    • HTML
  • CSSでの<ul><li id=n><a>での表示に付いて

    初めて質問させて頂きます。仮に作ったサイト名が次の通りです。 http://yusukeinoue.web.fc2.com/271p/271p.html Firefox、Operaで<#sidenavi>での<ul><li id=n><a>のCSSが間違っているのかimgが表示されないのです。CSSは以下の様な感じで } #wrapper #sidenavi ul { list-style-type: none; font-size: 10px; margin: 0px; padding: 0px; display: block; } #wrapper #sidenavi li a { display: block; margin: 0px; padding: 0px; height: 30px; width: 200px; font-size: 12px; text-decoration: none; } #sidenavi li#1 { background-image: url(images/bButton1.gif); background-repeat: no-repeat; margin: 0px; padding: 0px; height: 30px; width: 200px; } #sidenavi li#2 { background-image: url(images/bButton2.gif); background-repeat: no-repeat; margin: 0px; padding: 0px; height: 30px; width: 200px; id=liはそのあとも続くのですが、<em></em>で非表示にしています } #sidenavi em { visibility: hidden; } 使用環境はMacOX10.4.7、DreamweaverMXです。safariでは問題なく表示されます。 参考書籍通りに<ul><li>をボックス化して、インラインにし背景画像を 埋め込むと言う作業でした。 それ以上は書いていないので分かりません。。。 ご教授のほどお願いいたします

    • ベストアンサー
    • CSS
  • liタグの中に<p>タグやら<dl>を入れるのはあり?

    それともなしでしょうか? たとえば、作品実績みたいなのを羅列するとき 「画像」 「タイトル」 「簡単な説明」 を乗せたいときはどうしますか? <ul> <li> <p>画像</p> <dl> <dt>タイトル</dt> <dd>説明</dd> </dl> </li> </ul> こんな感じを考えたのですが・・・ <li>(作品)ごとにボーダーボトムで区切りたいかなと考えております。 <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか? </ul>

    • ベストアンサー
    • HTML
  • float横並びにしたブロックの中のul/liを縦並びにさせたい

    float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 (html) <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> (css) ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • DIVタグの背景に画像を配置できない

    <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう