- ベストアンサー
背景に影をつける方法（CSS）を教えてください。
以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }
- HTML
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは DTD宣言(<!DOCTYPE ～)してますか？ するしないでIEはpaddingをwidthに含めるか否かが変わります する→総幅 930px ( width:910px + padding:10px+10px ) しない→総幅 910px ( width:890px + padding:10px+10px ) CSSを見る限り左右に10pxの影を作っているものにならないような気がします ※img/mein-bg.gifが幅930pxで左右に10pxの影をつけた画像であるなら以下は無視してください <style type="text/css"><!-- body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; line-height: 150%; } #wrapper { width:930px; margin:auto; background-image: url(img/bg.gif); } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; background-image: url(img/main-bg.gif); } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; } --></style> <div id="wrapper"> <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right"> ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <div style="clear:both;"></div> </div> </div> なのでは？
その他の回答 (4)
- abril
- ベストアンサー率69% (388/560)
すみません、ANo.4にコピペミスがありましたので訂正しておきます。 【誤】 #right { float: right; width: 700px; margin-right: 10px; } ↓ 【正】 #right { display: inline;←追加 （以下同じ） }
- abril
- ベストアンサー率69% (388/560)
既に色々方法が出ていますが、これも1つのやり方として。 ・書式は（今までの質問者様の質問履歴から）XML宣言なしのXHTMLと仮定。 ・#mainを所謂wrapperとして扱う。#mainはbodyに対してセンタリング、W930pxの内左右10px分がドロップシャドウ領域なのでこの分は実質のコンテンツエリアから除外。clearfixはこの際#mainの定義に組み込む。 ・#leftは#mainの左端から10pxの余白を取って幅210px一杯、#rightは#mainの右端から10pxの余白を取って幅700px一杯。 ・#headerは定義されていないが、#mainの左右から10pxの余白を取って幅910px一杯。 ・フッター部分は言及されていないので現時点では無視（考慮外）。 ・表示結果はIE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPでほぼ同様。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" href="./css/common.css" type="text/css" media="all" /> <title>サンプル</title> </head> <body> <!-- #main start --> <div id="main"> <!-- #header start --> <div id="header"> ヘッダー </div> <!-- #header end --> <!-- #left start --> <div id="left"> <p>左側</p> </div> <!-- #left end --> <!-- #right start --> <div id="right"> <p>右側</p> </div> <!-- #right end --> </div> <!-- #main end --> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { font-size: 12px; text-align: center; background-image: url(img/bg.gif); line-height: 150%; padding: 0; margin: 0; } #main { zoom: 100%; width: 930px; background: url(img/main-bg.gif) repeat-y; text-align: left; margin: 0 auto; } #main:after { display: block; height: 0; visibility: hidden; content: "."; clear: both; } #header { margin: 0 10px; } #left { display: inline; float: left; width: 210px; margin-left: 10px; } #right { float: right; width: 700px; margin-right: 10px; } ---------------------------------------------------------------------- ・cleafixの方法は何パターンかありますが、ここではzoomを使っています。有効なものであれば他のパターンでもOKです。 ・bodyに意味不明の定義が多々あります。何を実現したいのかを見極め、理屈にあった定義をして下さい： width: 100%;→不要 height: auto;→不要（提供されたサンプル”だけ”を見る限りは） position: absolute;→不要 float: left;→不要 上記、「何をやっているのかわからない」もしくは「希望しているイメージとは違う」箇所があれば、詳細を補足して下さい。
お礼
いつもありがとうございます。 clearfixのパターンっていうのがあるのですね。 初めて知りました。 abrilさんにいただく回答はいつも少しづつですが新しい発見がありますので、助かります。 自分でも書籍を購入して勉強しているのですが、まだまだです・・・ できればこちらも合わせて利用させていただければと思います。 いつも本当にありがとうございます。
DIVを増やさない方法でしたら、こんなのでどうでしょうか？(使わないと思われるところ等、多少コメントアウトしました) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <style type="text/css"> body { font-size:medium; margin: 0px; padding: 0px; text-align: center; background-image: url(img/bg.gif); line-height: 1.5; /* font-size: 12px; width: 100%; height: auto; position: absolute; line-height: 150%; float: left; */ } #main { font-size:75%; width: 930px; text-align: left; margin: 0px auto 0 auto; background-image: url(img/main-bg.gif); } #header { float:left; width:930px; } #left { float: left; width: 190px; position:relative; left:20px; } #right { float: left; width: 700px; position:relative; left:30px; } .clearfix:after { content:"."; display:block; visibility:hidden; height:0; clear:both; } .clearfix { height:1%; overflow:hidden !important; overflow:visible; /*/*//*\*//*/ display:inline-table; /* */ } </style> </head> <body> <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right"> aああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああ </div> </div> </body> </html> もしも#leftと#rightに背景画像や色を使いたい場合は、CSS部分を #left { float: left; width: 220px; } #right { float: left; width: 710px; } に置き換え、paddingはそれぞれのdivの中の要素でとってやるとIEのバグに悩まされないと思いますよ。 DWのことはよくわかりませんが、float解除の方法にclearfixというものがあります。 classで設定されていいたのですがどうやら機能していない(？)ようなので書いておきました。 ついでですが、下記のサイトでCSSのバグを調べられます。 ttp://cssbug.at.infoseek.co.jp/
お礼
お返事が遅くなり申し訳ございません。 たった今確認させていただきました。 clearfixもひとつではないのですが、今自分で設定したものと比べてみたらところどころ違っていました・・・ 参考サイトを含め非常に助かりました。 本当にありがとうございました。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞画像は930pxで作成しています のであればDTD宣言すれば同じにすることできると思います ＞両サイドに影の画像を入れたりするのには、さらにもうひとつwrapperで囲わなければいけないんでしょうか？ ん～ case by case ですね 僕のは画像サイズが小さいもの(930pxより小さい）で考えていますので・・・ 質問者様のように幅一杯の画像を用意してそれを表示したり 影用の<div>を作ってそれをfloatを使って【影】【メイン】【影】のようにすることもあります ＞一番の大枠（私の場合main）がheadder部分までしか伸びないのです・・ <div>は本来width:100%;なのですがfloat、positionするとその中身の幅によってwidthが決まります <div style="background-color:red;">これはブラウザ幅一杯です</div> <div style="float:left;background-color:red;">これは中身の幅に合わせて幅が変わる</div> <div style="position:absolute;background-color:red;">これは中身の幅に合わせて幅が変わる</div> ＞<div style="clear:both;"></div> 手法というかfloatを使用したときの自分の思っているレイアウトを崩さない為の習慣ですね style="clear:***"でflaotを解除するとともに高さを取得する作用があります 例えば <div style="background-color:red;"> <div style="float:left;">aaa<br>bbb</div> </div> としたときにこれではfloatした部分の高さが取れていないので背景色は出ません <div style="background-color:red;"> <div style="float:left;">aaa<br>bbb</div> <div style="clear:both;"></div> </div> とすることでfloat部分の高さをとることができて背景色を出すことができます ただ人によって ・<br style="clear:both;">を使ったり ・<div style="clear:both;"></div>を使ったり ・floatしたものの下のタグにstyle="clear:both;"をつけたり という風に違います 僕の場合は<div style="clear:both;"></div>が習慣づいているというだけです
お礼
ありがとうございます。 画像は930pxで作成しています。。。 枠が910pxに両サイドに10pxづつです・・・ 両サイドに影の画像を入れたりするのには、さらにもうひとつwrapperで囲わなければいけないんでしょうか？ なんとなく<div>を入れ子にするのができれば避けたいと思っておりまして・・・ 生意気言ってすみません・・・ また、別の話？もしかすると根本的なことかもしれないのですが、いつもDWで作業してると、一番の大枠（私の場合main）がheadder部分までしか伸びないのです・・ このあたり今、FLOATとかPOSITIONを一から勉強中なので、原因があったりするのかな？と思ったりしてます。 実はfloatが左寄せじゃなくて、浮かすということも最近知りました（汗 また、以前の回答でもいただいた <div style="clear:both;"></div> これは中身なにもないですが、よくつかわれる手法なんでしょうか？ 一度調べてみます。 ありがとうございました。