こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

html/cssについて。画像が表示されません。
html/cssを手打ちしてコーディングしています。
一部の画像がどうしても表示されず、困っています。

まず、背景画像はJavaScriptで5枚の画像からランダムで表示。
次に帯状のヘッダ画像(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{ <!-- 問題箇所2 -->
background-image: url("../image/top_footer.gif");
height: 42px; <!-- 1000pxくらに表示すると表示される -->
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 { <!-- 問題箇所1 -->
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; <!-- 500pxを0にすればなぜか表示されます -->

}

投稿日時 - 2013-03-16 19:06:33

QNo.7996531

すぐに回答ほしいです

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

 とっても複雑怪奇な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をデザインは無視して徹底的に文書構造をマークアップだけしましょう。後でどのようにもデザインできます。
 具体的に絵を載せるとわかりやすいです。

投稿日時 - 2013-03-16 20:36:56

お礼

ご丁寧にありがとうございました。参考にさせて頂きます。

投稿日時 - 2013-03-17 22:46:29

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問