背景画像を二つ指定

質問

こんにちは。
全体の背景画像(斜めストライプの柄)と、
コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、
IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。

URLはこちら
http://ic.web6.jp/portfolio/rigtig.html

全体の背景はbodyに、
コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。

どうすればIE以外でもうまく表示されるでしょうか？

背景を指定しているCSSはこちら
body {
width : 762px;
margin : 0 auto;
background-image : url("images/top_bg.gif");
line-height:1.4;
font-size:10pt;
}

div#wrap{
width : 762px;
background-image : url("images/body_bg2.gif");
background-repeat: repeat-y;
}

回答No.1

himajin100000 · ベストアンサー

div#wrap{
width : 762px;
background-image : url("images/body_bg2.gif");
background-repeat: repeat-y;
overflow:auto;
}

http://gyauza.egoism.jp/clip/archives/2007/06/070602-overflow-hidden-clear/

お礼

できました！！！
あんなに悩んでいたのに・・・
まだよく理解してないのですが、これから勉強します。
本当に助かりました。ありがとうございました！

回答No.4

abril

> もし今も崩れているようでしたら原因を考えたいので、

確認しましたが、現在は支障なく表示（IE6.0/7.0、Firefox2.0～、Opera9.25）されている様です。無事問題が解決したのですね、良かったです。
ということですので、

> 確かにこのままでは恥ずかしいので消しておきます。

今の状態なら、別に恥ずかしいことはないかと思いますのでご自由になさって下さい。

※蛇足ですが、「EVENT」のところの、「【North Textile】3/19　13:00～」というテキストが（環境を問わず）ボックスの枠線までぴったりくっついている様ですが、余白を持たせてあげればなお見栄えも良いのではないかと思いました。

ちなみに、

> #leftでfloat:leftにしていて、
> #rightでfloat:rightをやるのはおかしいと思うのですが、

おかしいでしょうか？この手のレイアウトならどちらのブロックもfloat:leftにする事も可能だと思いますが（実際に質問者様のコンテンツでの検証はしていないので断言はしません）あるコンテナブロックは左に浮き／あるコンテナブロックは右に浮く、という構成自体は別に有り得ない事ではないと思います。

お礼

お礼が遅くなって申し訳ありませんでした。とても勉強になりました。ありがとうございます。

回答No.3

abril

> NetScape、Firefoxでは真ん中の画像が表示されません。。

背景画像表示されない、というよりはdiv#rightboxのコンテナブロック全体がdiv#leftに重なってしまってすし、div#rightbox1はすとーんとフッターの下に落っこちてしまっている、という壊滅的なレイアウト崩れが起きている状態ですが…？

ANo.2の回答者様の仰るアドバイスに従われるのが賢明でしょう。現在の状態で、W3CのCSS Validatorのボタンを置いて更にはaltで「正当なCSSです!」と堂々と宣言されているのは、ちょっとどうかと…

お礼

アドバイスありがとうございます。
div#rightboxですが、NetScape、Firefoxと、IE6、IE7で確認しているのですが、先ほどもいろいろいじっていてそのような状態になったので、もしかしたらその途中にご覧になったのかもしれません。

もし今も崩れているようでしたら原因を考えたいので、
よろしければブラウザを教えていただけますでしょうか？

W3Cのボタンは間違ったタグがないか確認ながら作業したくて置いたもので、altはコピペの中に元々あったものなのですが、確かにこのままでは恥ずかしいので消しておきます。

回答No.2

grumpy_the_dwarf

見ましたが、何もかもが無意味にfloatしているので、wrapもboxも高さが
0です。IEで背景が表示されるのは高さの計算を間違える有名なバグなので
背景を表示しないすべてのブラウザの動作が正しいです。

適切にclearしてfloatを解除するようにしてください。たとえばfooterは
maincontentsの外にあってfloatしていないのが適正だし、topimgが
floatしているのも変です。それぞれfloatをヤメ、直前でclearしてみて
ください。wrapとboxの二重構造も意味不明ですが。

overflow属性明記で逃げてたら、マトモに書けるようにはなりません。
構造と意味を考えて論理的にかける頭脳を養ってください。

お礼

アドバイスありがとうございます！
すごく参考になりました。
よく理解していないまま無駄に使っていたいろんな部分のfloatを直してみました。
maincontentsもfooterにかぶっていたので、直しました。
ただ、maincontentsのレイアウトがまだおかしいと思うので、
もしまた見ましたらアドバイス頂けると嬉しいです。

maincontentsで囲った中にleftとrightをおきたいのですが、やはりIE以外でのfloatがうまくできません。
今のCSSはこうなっています。

div#left{
width : 160px;
float : left;
}
div#right{
width : 540px;
float: right;
}
↑
#leftでfloat:leftにしていて、
#rightでfloat:rightをやるのはおかしいと思うのですが、
IE以外だと全体の真ん中の位置に#rightが表示されてしまうのです。

それぞれmaincontentsで囲っているので、#leftの続く要素として#rightが置かれているはずなのですが、、
きっと私の理解がどこかで間違っているのだと思います。
きちんと理解して正しいソースを書きたいので、アドバイスありましたらぜひお願い致します。