こんにちは。
全体の背景画像(斜めストライプの柄)と、
コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、
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ベストアンサー
- 回答日時:
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/07 …
できました!!!
あんなに悩んでいたのに・・・
まだよく理解してないのですが、これから勉強します。
本当に助かりました。ありがとうございました!
No.4
- 回答日時:
> もし今も崩れているようでしたら原因を考えたいので、
確認しましたが、現在は支障なく表示(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
- 回答日時:
> 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
- 回答日時:
見ましたが、何もかもが無意味に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が置かれているはずなのですが、、
きっと私の理解がどこかで間違っているのだと思います。
きちんと理解して正しいソースを書きたいので、アドバイスありましたらぜひお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグで画像の繰り返し使用は…
-
同じ画像 複数回使用
-
lightbox2で画像を天地左右中央...
-
WEB上でディレクトリ内の画像を...
-
背景画像をリピートさせない方...
-
gif画像でたまに背景がグレーに...
-
CSS マウスオーバーでテキスト...
-
CSSでの動画のマスク処理
-
フッターの背景に色を指定した...
-
LightBoxの矢印の出し方
-
ひとつの画像をWEBで異なる小さ...
-
before疑似要素で画像を指定し...
-
背景画像の上に透過GIF背景...
-
<hr>の縦バージョンはありますか?
-
htmlタグで画像を背景に敷き詰...
-
【至急お助け!】チェックボッ...
-
サファリで背景画像が1ピクセ...
-
下記サイトのトップ画像はどの...
-
【Webサイト】画像が小さく表示...
-
画像で背景透明のテキストがに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報