以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・
やり方としてはメイン(wrapper)のボックスに+影の幅(左+右)のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。
その中をヘッダー+2カラムで構成しているのですが、IE6だけ右側部分の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;
}
No.1ベストアンサー
- 回答日時:
こんにちは
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>
なのでは?
ありがとうございます。
画像は930pxで作成しています。。。
枠が910pxに両サイドに10pxづつです・・・
両サイドに影の画像を入れたりするのには、さらにもうひとつwrapperで囲わなければいけないんでしょうか?
なんとなく<div>を入れ子にするのができれば避けたいと思っておりまして・・・
生意気言ってすみません・・・
また、別の話?もしかすると根本的なことかもしれないのですが、いつもDWで作業してると、一番の大枠(私の場合main)がheadder部分までしか伸びないのです・・
このあたり今、FLOATとかPOSITIONを一から勉強中なので、原因があったりするのかな?と思ったりしてます。
実はfloatが左寄せじゃなくて、浮かすということも最近知りました(汗
また、以前の回答でもいただいた
<div style="clear:both;"></div>
これは中身なにもないですが、よくつかわれる手法なんでしょうか?
一度調べてみます。
ありがとうございました。
No.5
- 回答日時:
すみません、ANo.4にコピペミスがありましたので訂正しておきます。
【誤】
#right {
float: right;
width: 700px;
margin-right: 10px;
}
↓
【正】
#right {
display: inline;←追加
(以下同じ)
}
No.4
- 回答日時:
既に色々方法が出ていますが、これも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.dt …
<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さんにいただく回答はいつも少しづつですが新しい発見がありますので、助かります。
自分でも書籍を購入して勉強しているのですが、まだまだです・・・
できればこちらも合わせて利用させていただければと思います。
いつも本当にありがとうございます。
No.3
- 回答日時:
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もひとつではないのですが、今自分で設定したものと比べてみたらところどころ違っていました・・・
参考サイトを含め非常に助かりました。
本当にありがとうございました。
No.2
- 回答日時:
こんにちは
>画像は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>が習慣づいているというだけです
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画像イメージの上下左右、欲し...
-
ロールオーバーの挙動がおかしい
-
CSSでボックスのheightが0になる
-
Media Queries 4 で 非推奨とな...
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
ブラウザの文字サイズを変更す...
-
HTMLのiframeの入れ子について
-
ホームページのメニュー
-
インラインフレーム内の表示位...
-
div枠のレイアウトが崩れてしま...
-
float: leftで横に並べたら、サ...
-
マージンの基点について
-
ウインドウを小さくするとbody...
-
スクロールボックスを中央に配...
-
表示倍率を変えるとレイアウト...
-
CSSについて
-
モーダルダイアログでのボタン...
-
CSSで指定した背景画像にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報