CSSで親ボックスの背景画像を設定してもNN7.01で表示されない

このQ&Aのポイント
  • CSSで親ボックスの背景画像がNN7.01では表示されない問題について
  • HTMLとCSSを使って親ボックスの背景画像を設定したが、NN7.01ではヘッダー以外のボックスに背景画像が表示されない
  • 解決方法が見つからないため、CSSにつまづいている
回答を見る
  • ベストアンサー

CSSで親ボックスの背景画像を設定してもNN7.01で表示されない

例えば、下記のように記述して「wrapper」ボックスで 「bodybg.gif」という画像を垂直方向に並べたいのですが、IE6ではうまく表示されますが、NN7.01だとヘッダー部分以外のボックスに背景画像が表示されません(><;) /* html * / <div id="wrapper"> <div id="header"></div> /* ヘッダー */ <div id="pagebody"> /* pagebody内2カラム */ <div id="content"></div> /* 右寄せ */ <div id="leftside"></div> /* 左寄せ */ </div> </div> /* css * / #wrapper { width: 600px; margin-left: auto; margin-right: auto; margin:0px; background: url(../img/bodybg.gif) repeat-y; padding: 0px; } CSSで毎回つまづくところですが、どうにもこうにも対処方法が見つかりません(T_T) どなたか力をかしていただけないでしょうか・・・

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

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

最後の</div>の手前に <div style="clear:both;"></div> を入れてみるとか。

参考URL:
http://allabout.co.jp/computer/hpcreate/closeup/CU20050401A/index2.htm
kemura
質問者

お礼

早速有難うございました!m(_ _)m 参考サイトを見て下記のように書き直してみて、 成功しました!有難うございました。 /* html * / <div id="wrapper"> <div id="header"></div> /* ヘッダー */ <div id="pagebody"> /* pagebody内2カラム */ <div id="content"></div> /* 右寄せ */ <div id="leftside"></div> /* 左寄せ */ </div> <div class="clear"></div> </div> /* css * / #wrapper { width: 600px; margin-left: auto; margin-right: auto; margin:0px; background: url(../img/bodybg.gif) repeat-y; padding: 0px; } .clear { clear: both; } しかし、wrapperで背景を貼り付けるのがレイアウト上まずくなったので、 background: url(../img/bodybg.gif) repeat-y; の記述をwrapperからpagebodyに変えると、またNNでは背景が表示されない・・・ということになりました(--;) NNのキャッシュをクリアしたりしたのですが、 どうもうまくいきません。こんなに苦労するならCSSなんてあっさりやめれば楽なんですが・・・

関連するQ&A

  • CSSで子ボックスに背景画像を設定してもNN7.01で表示されない

    例えば、下記のように記述して「pagebody」ボックスで 「bodybg.gif」という画像を垂直方向に並べたいのですが、IE6ではうまく表示されますが、NN7.01だとpagebodyのボックスに背景画像が表示されません(><;) 先ほど締め切った質問で「wrapper」のボックスに背景画像を貼り付けようとしてうまくいかなかった件はアドバイスを頂き、CSSに下記記述を加え、 .clear { clear: both; } 回り込み解除<div class="clear"></div>を挿入することで解決しましたが、レイアウト上wrapperの子ボックスにあたるpagebody内に背景画像を設定しなければならなくなり、またドツボにはまりました(><;)(><;)(><;)(><;) /* 問題のhtml * / <div id="wrapper"> <div id="header"></div> /* ヘッダー */ <div id="pagebody"> /* pagebody内2カラム */ <div id="content"></div> /* 右寄せ */ <div id="leftside"></div> /* 左寄せ */ </div> <div class="clear"></div> </div> /* 問題のcss * / #pagebody { padding: 0; margin-top: 4px; background: url(img/bodybg.gif) repeat-y;} 前回と同じような質問ですが、状況が変わってきたので仕切り直しました。 すみませんがどなたか教えて下さい・・・m(_ _)m

    • ベストアンサー
    • CSS
  • CSSで3分割した背景画像を配置したいけど隙間が出来てしまう?

    初めて質問させていただきます。 当方はCSS初心者です。 画像(グラデーションのある角丸四角枠)を3分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • CSS 画像中央そろえ

    スタイルシートを利用して、以下のことを実現させたいのですができません。 解決方法を探しています。 ■症状 ページ全体は左寄せ ページの中身は画像単体だったり、表があったりします。 画像は中央寄せ、表も中央寄せ、表の中身(テキスト)は左寄せにしたいのですが 以下の環境下でページ中身が左寄せになってしまいます。  ⇒Mac:IE ■CSSソース #box{ ←ページ全体 width:760px; margin: 0px; text-align:center; } .box-center { ←ページ中身 text-align:center; margin:0px auto; padding:0; } .box-red { ←ページ中身の表(外枠) background-color:#FF0000; padding:5px; margin:0px auto 20px auto; } .box-yellow { ←ページ中身の表(内側) background-color:#FFF299; line-height:150%; text-align:left; } ■HTMLソース(抜粋) <div id="box">  <div class="box-center">   <img src="~">   <div class="box-red">    <div class="box-yellow">~</div>   </div>  </div> </div> お分かりになる方、いらっしゃいませんでしょうか? よろしくお願いします。

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

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************

  • 【初心者】cssの背景画像について

    cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ======================= * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ======================= <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>

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

    CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか? http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします!

    • ベストアンサー
    • HTML
  • ディスプレイのサイズに合わせた背景画像

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthをちょうせいする。とかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x; position:absolute; left:850px; top:0; } ************************************************

    • 締切済み
    • CSS
  • CSSでの背景画像の設定について

    CSSでの背景画像の設定について質問です。 参照ページ(http://www.balmuda.com/jp/)のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。> 解決策を教えて頂ければ幸いです。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSでボックスを中央に表示させたい

    CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。

    • ベストアンサー
    • CSS
  • CSSの設定でわからない箇所があります。

    CSSの設定でわからない箇所があります。 ベタ塗りの背景画像と本文エリアのページ両端をドロップシャドウ効果で 縦にリピートするライン画像の背景を使用したいのですが、 途中でドロップシャドウの線が止まってしまいます。 <body> <div id="wrapper"> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </div> </body> のように指定して、 body { background-image: url(img/back.gif); background-repeat: repeat; } と #wrapper { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-image: url(img/shadow.png); background-repeat: repeat-y; } のように設定しました。 そうすると、footerエリアは#wrapper内なので、 指定したドロップシャドウのラインの背景がブラウザ画面を拡大すると切れてしまいます。 ブラウザのサイズ、拡大縮小に関係なく、ページ最下部までドロップシャドウの背景を伸ばしたいです。 *back.gif=(ベタ塗り背景)。shadow.png=(ドロップシャドウ効果のライン)です。 それら背景をブラウザのサイズ関係なく最下層まで切れずに表示させたいです。(高さが50pixでも1000pixでも表示させたいです。) *ページは中央配置、横幅は固定、縦は各ページで成り行きにしたいです。 *現在背景は、ベタ塗りの背景画像と、ドロップシャドウ効果のラインの背景画像の2種を使用しています。設定方法、CSSの適用場所は選びません。 以上、ご教授下さい。 宜しくお願い致します。

専門家に質問してみよう