- ベストアンサー
floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
#1 です。 >ところが、、、エンコードをUTF-8にするとCSSが効かなくなるのです。 IE6 は xhml と、css ファイルで文字コードが違うと、css が読込まれないことがあります。xhtml と css の文字コードを合わせてください。 ><html xmlns= の部分のhttpの前に&,#,8203とあるのですが（実際はカンマなし）、これは何かが文字化けしているので この件は、 <html xmlns="http://www.w3.org/1999/xhtml"> が正解です。コピーした際におかしなコードが入ってしまったのも知れません。 >IE7やfirefoxでは普通に表示されますが、IE６でみると、カルマ落ちしています。 >どこが悪くてこうなっているか、これでおわかりになるでしょうか？ >http://www17.plala.or.jp/malika/gooweb.html 上記のページですが、調べてみれば判ると思いますが、出来れば質問者様で確認される事をお勧めします。 まずは、なぜ検証ソースでは問題なく IE6 で段組みが出来ているのか検証される事をお勧めします。
その他の回答 (6)
- abril
- ベストアンサー率69% (388/560)
横から失礼致します。既に今の回答者様が大変詳細に検証・ご指導されていらっしゃる事ですし、私は提供されたhttp://www17.plala.or.jp/malika/gooweb.htmlのHTMLとCSSだけななめ見していて気付いた事があるので、ヒントだけに留めさせて頂きます。 いったん、<div id="main02">～</div>の中の要素をダミーテキスト（現状だったら"main02"の文字）だけにしてその他の<div id="main02">～</div>の中の要素を削除してみて下さい。 これで少なくとも現在IE6でのみ起きているコラム落ち現象は解消されます。そしてその事で、”実は”どこに原因があったのか、という事がおわかりになるかと…多分、質問者様にとっては「意外」なところではないかと思います。 ※ただ、これ”だけ”が原因だとするとIE6以外でもコラム落ちしそうなものなんですが、他の設定との継承のされ方等で解釈違いが出ているのかもしれません。そこの検討は省略させて頂きますのでご容赦下さい。
お礼
いただいたヒントで解決しました！ main02の中にあるh1タグのpadding-rightを200pxも取っていたのが原因でした。 ＜多分、質問者様にとっては「意外」なところではないかと思います。 まさに“意外”でした。ミスって書いたのでそういう認識がなかったからです。 お恥ずかしい限りです。 ご指摘本当にありがとうございました！！助かりました！
- nori_007
- ベストアンサー率35% (369/1048)
#1 です。 下記のソースを、テキストエディタに貼付け、各ブラウザにて検証してみてください。 -- ここからコピー -- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo2</title> <style type="text/css"> <!-- body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; background-color: #FFE; /*追加*/ } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; background-color: #FFF; /*追加*/ } #header { width:776px; height:65px; margin :0px auto 0px auto; background-color: #FFC; /*追加*/ } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; background-color: #FFB; /*追加*/ } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; background-color: #FFA; /*追加*/ } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } --> </style> </head> <body> <div id="container"> <div id="header"><img src="○○" /></div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href="○○"></a></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html> -- ここまで -- まず、Dreamweaver8 とのことですので、xhtml にしています。基本的には以前アップしたソースと同じになります。違いをご検証ください。
お礼
nori_007様、ありがとうございますm(__)m テキストエディタに貼り付けてアップしてみました。 おー！IE6で見てもちゃんと段組なされているではありませんか！ すぐにHPに当てはめてみました。 ところが、、、エンコードをUTF-8にするとCSSが効かなくなるのです。 わたしはデフォルトのshift_jisで作成していましたが、UTF-8で作成するべきものなのでしょうか。 それと、<html xmlns= の部分のhttpの前に&,#,8203とあるのですが（実際はカンマなし）、これは何かが文字化けしているのでしょうか。このままコピペしても、この部分を外してもやはりCSSは効きませんでした。 お手間をとらせますが、この2点を教えていただけませんか？
補足
実際に作っているものをアップしてみました。 IE7やfirefoxでは普通に表示されますが、IE６でみると、カルマ落ちしています。 どこが悪くてこうなっているか、これでおわかりになるでしょうか？ http://www17.plala.or.jp/malika/gooweb.html
- ran_2323
- ベストアンサー率43% (32/73)
＃3です。 「#main02」の中に「.content」があるということでいいでしょうか。 #main02{ float:left; width:410px; } #main02 .content{ padding: 20px 50px 20px 50px; } というかんじです。 IE6や古いIEは、どうもwidthに対するpaddingの解釈方法が他のブラウザと違うようです。IEが間違っているんですけどね。 なので、CSSで組むときも、あまりがちがちにwidth指定をして組むのはズレも元で、ブラウザチェックも大変です。 質問者さんの提示されたソースを自分環境で検証してみたところ、全てのブラウザでレイアウトがズレてしまっていたので、CSS指定の仕方に混乱があるように思いました。 Dreamweaverはあまり信用せず、ブラウザでファイルを開き、全ての要素に「border:1px #ccc solid;」を入れて要素のズレが何が原因で起こっているのかを見たほうがいいと思います。 FirefoxにはCSS構造を表示してくれる便利なプラグインがたくさんあるので、それを見てみてもいいと思いますよ。
お礼
ご意見ありがとうございます。 まず、子要素にはfloat:left;は不要なのですね。 でも、やはりpaddingが効きません。 ＜あまりがちがちにwidth指定をして組むのはズレも元 パーセントで指定したほうがいいのかもしれませんね・・ ＜自分環境で検証してみたところ、全てのブラウザでレイアウトがズレてしまっていたので そうですか！？ わたしが見たところは、当初書きましたように、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 ご指摘いただいたようにボーダーを入れてみると、やはり左ボックスのmain02が指定した幅よりぐんと伸びておかしいです。 CSSって難しいですねえ(・_・;) でも、とことん追求してみたいと思います。 ありがとうございましたm(__)m
- ran_2323
- ベストアンサー率43% (32/73)
同一スタイルでwidthとpaddingを一緒に指定しているのがIE6でのレイアウト崩れの原因になると思います。 親要素でwidth、その子要素にpaddingをつけるやり方がよいかと思われます。 ブラウザによって、widthとpaddingの関係についての解釈が違うので、そこを注意して組んでいけば、大きなレイアウト崩れは起こさないと思いますよ。
お礼
投稿ありがとうございます。 同一スタイルでwidthとpaddingを一緒に指定しているのはよくない方法なのでしょうか。 この場合の親要素は、左側のボックスで言えば#main02ですか？ 子要素を例えば#main02.contentなどとしてこれにpaddingを設けるとよいのでしょうか。 試しにやってみたのですが、paddingが無視されてテキストが左端に寄って表示されてしまいました。 /*css*/ /*main02からpaddingを取って#main02.contentに入れました*/ #main02.content{ float:left; padding: 20px 50px 20px 50px; } /*html*/ -省略- <div id="main02"> <div class="content">○○</div></div> <div class="clear"></div> -省略-
- nori_007
- ベストアンサー率35% (369/1048)
#1 です。 >２．Aボックスの幅510px、Bボックスの幅230pxについて の件は了解いたしました。 所で、検証したソースは確認して頂けたでしょうか？。 また、Dreamweaver のバージョンが 2004 との事ですが、2004 はまともに CSS は解釈出来ません、８ では少しまともになりましたが、挙動は怪しいと思います。検証はブラウザ行う事をお勧めします。
お礼
ご指示いただいたとおりやってみました。 確認はまずローカルでして、そのあと必ブラウザでプレビューしています。 状況は変わっていません。 ＜2004 はまともに CSS は解釈出来ません、 そうなんですか。知りませんでした。 今回の場合は、職場で8、自宅で2004で行なっていますが、どちらも同じようにプレビューされています。
- nori_007
- ベストアンサー率35% (369/1048)
検証してみました。 まず <div id="header"><img src="○○" </div> タグの閉じ忘れがあります。 <div id="navi"><a href=○○></div> タグの閉じ忘れがあります。 >Aボックスの幅510px サンプルソースでは、410 となっています。 >Bボックスの幅230px サンプルソースでは、200 となっています。 上記を修正して下記のソースを作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo</title> <style type="text/css"> <!-- body { margin: 0; /*background-image:url(bg.gif); background-position:top; background-repeat:repeat-x;*/ background-color: #FFE; /*追加*/ } #container { width:776px; margin:0px auto 0px auto; /*background-image:url(main.gif); background-repeat:repeat-y;*/ background-color: #FFF; /*追加*/ } #header { width:776px; height:65px; margin :0px auto 0px auto; background-color: #FFC; /*追加*/ } #main02 { /*width:410px;*/ width:510px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; background-color: #FFB; /*追加*/ } #navcontainer{ /*width: 200px;*/ width: 230px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; background-color: #FFA; /*追加*/ } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } </style> </head> <body> <div id="container"> <div id="header"><img src="○○" /></div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></a></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html> 判りやすくする為に、background-color: を追加しました。 手直しした内容は、上記タグの閉じ忘れと、background-color: の追加です。 #container { width:776px; } ですので、単純に、510px + 230px で、740px になりますが。 #main02 { padding: 20px 50px 20px 50px; } padding で左右の合計が 100px #navcontainer{ padding: 30px 30px 0 0; } padding で右側に 30px 総合計で、130px 分あり、740px に 130px がプラスになりますので、870px になり、776px をオーバーしています。W3C に準拠したブラウザは段位落ちが発生し、IE6 では問題なく表示すると思います。 ですの検証として上記の padding で左右の値をゼロにしてみてください。 Dreamweaver のバージョンが不明な為、Dreamweaver の挙動まで考えると混乱しますので、純粋にブラウザで検証してください。 IE6 には色々バグもあります。また、DOCTYPEスイッチ の関係も有りますので、ご配慮ください。 今のソースでは IE6 で、container はセンターに寄らない事もご確認ください。 ご確認ください。
お礼
お忙しいところ、お時間を割いて検証、書き込みをいただきありがとうござました。 １．タグの閉じ忘れについて 実際のコードはロールオーバーのscript等が入って複雑ですので、必要部分のみコピー貼り付けしたのですが、その際の手落ちです(^^; 実際は閉じ忘れはありません。 ２．Aボックスの幅510px、Bボックスの幅230pxについて これは純粋なwidthではなく、paddingを足した数字です（Aはwidth410px+padding（左右で）100px=510px、Bはwidth200px+padding30px=230px)。 ３．＜検証として上記の padding で左右の値をゼロにしてみてください。 ゼロにしてみましたが、カラムは落ちたままです。 それと、ゼロにするとテキストがメインコンテンツの端までいってしまうので、これはデザインとしておかしくなります。 <補足> 「Dreamweaverの作成画面では、Aボックスの文字は定めた幅510px(widthとpaddingの合計です）で折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、…」と書きましたが、Doreamweaver8で「main02」の部分にカーソルを当てると「ID main02 幅410px（581px)」とポップアップで表示されました （自宅で書き込みしたのですが、自宅のDreamweaverはバージョンが2004で、ポップアップがないのでスケールを見て書きました）。 なぜ、実際のwidthは410pxなのに（581px)と表示され、実際の制作面もそのようになり、IE６でのプレビューはそのとおりカラム落ちし、IE7,safari,firefoxは何事もないように普通に問題なくプレビューされるのか疑問です。 headより上は下記のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
お礼
おっしゃるとおり考えてみたのですが、どうしてなのか原因を考えつきませんでした。 今日、No.7でabril様から 「<div id="main02">～</div>の中の要素を削除してみて下さい。」とヒントを下さったのでそのとおり削除してみました。 すると、そのとおりカラム落ちしません！ その中にあるのは画像のタイトルで、<h1></h1>で囲んでいました。 そこで、改めてcssでh1のスタイルを見てみると・・padding-rightが200pxにもなっていました！ それで実際はmain02の横幅がとても大きくなってしまっていたのです。 入力ミスでこんな大きな値になっていたと思います。 ここを0にするとIE6でも問題なく表示されました。 他のブラウザでは問題なく表示されていて、IE6だけカラム落ちするのは、IE6はバグが多いブラウザだからなのではと思っていました。 こんな単純ミスで何日も煩わせまして・・・本当に申し訳ありません。 「カラム落ち」を「カルマ落ち」と書いてしまったりもう少し落ち着かないと(-_-;) 丁寧な検証をいただきありがとうございました。心よりお礼申し上げます。