ベストアンサー

※ ChatGPTを利用し、要約された質問です（原文：html/css について質問です。）

HTML/CSSのトップページコーディングに関する問題

2013/03/15 13:17

このQ&Aのポイント

HTML/CSSのトップページコーディングで、ヘッダ画像とフッダ画像の位置調整と表示され方に関する問題が発生しています。
ヘッダ画像の余白を埋める方法や、フッダ画像が消えずに常に表示される方法について教えてください。
また、background-repeatで画像を右方向にリピートさせる方法についても教えてください。

html/css について質問です。

現在、htmlとcssを勉強しながら、トップページのコーディングしています。以下の処理を行っています。〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。〇javaScriptでランダムにトップの画像を表示している。しかし、３点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか？ ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、この範囲がブラウザを大きくすると消えて見えなくなります。だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか？ ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか？どなたかご指導お願いします。 [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> </body> [css] #container{ width:100%; height: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; }

yuki_tigers
お礼率55% (31/56)

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

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

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

ベストアンサー

noname#187563

2013/03/15 13:41 回答No.1

基本的に、私は、* ｛margin:0;padding:0;｝　を最初に入れてそれぞれのブラウザで異なるデフォルト値を０にリセットします。それからbodyタグのＣＳＳでブラウザ内側の余白を設定します。これは、ほとんどの場合０にします。そしてＣＳＳを始めるようにしています。背景の場合どうなったかちょっと忘れましたが、枠に画像を入れるときは、display-blockは効果的です。ちょっと時間がなくて画像の用意ができませんので確認はできません。あしからず。

質問者

お礼 2013/03/16 12:38

ありがとうございます。お陰様で解決しました。

その他の回答 (1)

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

2013/03/15 15:49 回答No.2

html,body{margin:0;padding:0;} を入れると消えるのでは？　

HTML/CSSのトップページコーディングに関する問題

html/css について質問です。

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

お礼 2013/03/16 12:38

その他の回答 (1)

関連するQ&A

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

CSSについて教えて下さい

CSSで背景画像をランダムに表示させたいのですが

XTHML CSSのロールオーバーについて

CSSのborderが実際の領域より上に表示される

CSS floatについて教えて下さい。

CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？

Mac OSX でのブラウズで、背景画像が表示されない現象

このCSSのどこを直せばいいですか？アドバイス求ム

IE6で外部リンク画像の下に隙間

このhtml,cssでどこがおかしいか分かりません

FireFoxで見るとdiv間に隙間が・・・

cssで角丸で一部の画像だけを変更したい。

oveflow、margin等の表示について質問です

2つのDIVを中央と右に横並びにしたい

IEのみでCSSのbottomが効かない。

cssのショートハンドについて質問です。

ディスプレイサイズにあわせた背景画像

idかclassかどっちが良いでしょうか？

cssのmarginについて教えてください

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

HTML/CSSのトップページコーディングに関する問題

html/css について質問です。

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

お礼 2013/03/16 12:38

その他の回答 (1)

関連するQ&A

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

CSSについて教えて下さい

CSSで背景画像をランダムに表示させたいのですが

XTHML CSSのロールオーバーについて

CSSのborderが実際の領域より上に表示される

CSS floatについて教えて下さい。

CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？

Mac OSX でのブラウズで、背景画像が表示されない現象

このCSSのどこを直せばいいですか？アドバイス求ム

IE6で外部リンク画像の下に隙間

このhtml,cssでどこがおかしいか分かりません

FireFoxで見るとdiv間に隙間が・・・

cssで角丸で一部の画像だけを変更したい。

oveflow、margin等の表示について質問です

2つのDIVを中央と右に横並びにしたい

IEのみでCSSのbottomが効かない。

cssのショートハンドについて質問です。

ディスプレイサイズにあわせた背景画像

idかclassか どっちが良いでしょうか？

cssのmarginについて教えてください

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

idかclassかどっちが良いでしょうか？

カテゴリ
一覧

専門家に質問してみよう
専門家登録