HTML/CSSで画像が表示されない問題について

2013/03/16 19:06

このQ&Aのポイント

HTML/CSSで画像が表示されない問題が発生しています。背景画像やヘッダ画像、フッダ画像は表示されていますが、特定のボタン画像とフッダ画像が表示されません。
ボタン画像は指定した位置に表示されないため、常に表示する配置をしたいと考えていますが、表示されなくなってしまいます。同様にフッダ画像も指定した高さでないと表示されないようです。
ボタン画像とフッダ画像の表示方法について、ご教示いただけると幸いです。

本当に困っています。html/cssについて。

html/cssについて。画像が表示されません。 html/cssを手打ちしてコーディングしています。一部の画像がどうしても表示されず、困っています。まず、背景画像はJavaScriptで５枚の画像からランダムで表示。次に帯状のヘッダ画像(top_header.gif)を最上部に横方向にリピートして表示。同じくフッダ画像(top_footer.gif)を最下部に横方向にリピートして表示。そして左上にホームボタン画像(TOP_s1.gif)を配置。次が問題になっている箇所です。ボタン画像(button_r1_c1_s1.gif[width 136px heignt 36px])を上から0px,右から500pxの位置に、ブラウザの大きさに関わらず常に表示される(fixed)ようにしたいのですが、画像が表示されなくなります。ちなみに透明のままですが、ブラウザで確認するとタブの遷移はできます。これもちなみにですが、上から0px,右からも0pxの位置に指定すると表示されます。右から0pxだと表示されるが、それ以外だと表示されません。他の画像が邪魔しているのなのか、原因がわかりません。同様にフッダ画像(top_footer.gif[width 1681px height 42px])も表示されていません。これはheightを1000pxくらいで指定すれば、なぜか表示されるのですが、邪道な気がしています。どなたかボタン画像(button_r1_c1_s1.gif)とフッダ画像(top_footer.gif)の表示方法をご指導願います。よろしくお願いします。【html】 <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> <div id="TOP_s1"><a href="#"></a></div> <div id="News"><a href="#"></a></div> </div> </body> 【CSS】 @charset "utf-8"; /* CSS Document */ body{ padding-top: 0; padding-right: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-left: 0; overflow-y: hidden; overflow-x: hidden; } #container{ height:100%; width:100%; } #top_header{ background-image: url("../image/top_header.gif"); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{  background-image: url("../image/top_footer.gif"); height: 42px;　 bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; } #TOP_s1 a { background-image: url("../image/TOP_s1.gif"); height: 194px; width:332px; background-position: left top; background-repeat:no-repeat; background-attachment: scroll; position:absolute; z-index: 3; top:0; left: 0; } #TOP_s1 a:hover { background-image: url("../image/TOP_s2.gif"); } #News a {  background-image: url("../image/button_r1_c1_s1.gif"); height: 136px; width:36px; background-position: right top; background-repeat:no-repeat; background-attachment: fixed; position:absolute; z-index: 3; top:0px; right: 500px;  }

yuki_tigers
お礼率55% (31/56)

CSS
回答数1
ありがとう数1

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

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/03/16 20:36 回答No.1

　とっても複雑怪奇なHTMLとCSSなので、何をしようとしているのかが、さっぱりわかりません。　まず、HTML(頭文字なので、大文字で書くように)ですが、javascriptは問題ないので後回しにして・・文書構造だけを書きます。 <body> 　　<div class="header"> 　　　　<h1>ページタイトル</h1> 　　</div> 　　<div class="section"> 　　　　<h2>本文記事見出し</h2> 　　</div> 　　<div class="footer"> 　　　　<p><a href="/">サイトトップ</a></p> 　　　　<p><a href="#"></a></p> 　　</div> </body> 以外何も書く必要はありません。 container--多分意味的にはarticle--でしょうが、この程度のHTMLなら不要です。　(article : 内部にheader,section,footerを持ちうる完結した記事) header,section,footerは、ひとつの文書内に何度も登場する可能性があるのでclassのほうが良いでしょう。　header,section,footer,articleのclass名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )の名前とその用途を参考にしています。　将来、HTML5に即変更できますから・・ [スタイルシート] ・背景画像をランダムに変更する。・headerは縦34pxでfixedで常にページ最上部に固定・footerは縦42pxでfixedで常にページ最下部に固定・サイトトップへのリンクは(194px×332px)のボタンでページの左上　　　↑えらくでかいけど、このサイズ合ってます？？　また、最後の二つは矛盾しています。なぜなら、ボタンの位置を絶対配置しようとすると、その要素が含まれるstaytic以外の直近の親要素があれば、その親要素の位置が基準になるからです。 <body> 　　<div class="header"> 　　　　<h1>ページタイトル</h1> 　　　　<p><a href="/">サイトトップ</a></p> 　　</div> 　　<div class="section"> 　　　　<h2>本文記事見出し</h2> 　　</div> 　　<div class="footer"> 　　　　<p><a href="#"></a></p> 　　</div> </body> なら可能です。　HTMLをデザインは無視して徹底的に文書構造をマークアップだけしましょう。後でどのようにもデザインできます。　具体的に絵を載せるとわかりやすいです。