- ベストアンサー
コンテンツをセンター表示
コンテンツにメインとフッダーのボックスを作り、 フッダーは最下部に固定しています。 これらをまとめて中央表示にしたいのです。 div #container {margin : 0px auto (他略) ;} としても左揃えのまま。 調べた結果、 body内を中央表示にすればいいとのことで試してみたのですが、 メインが中央表示になることはあってもフッダーは左揃えのままでした。 どう対処したらよいのでしょうか？ ちなみにブラウザはIE7です。
- HTML
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> DOCTYPEはHTML 4.01 Transitionalなのですが、 おやそうでしたか。 > 参考サイト様のCSSおよびHTMLを丸ごとコピーしてみてもセンタリングされません。 うーん、なりますけどね… 下記をそっくりコピペして試してみてもらえますか？ ※コピペの際に、変な全角スペースや記号が入ってないかは確認して下さい。 ※下記のサンプル内のCSSでは、それぞれのコンテナブロックの領域をわかりやすくする為に、一時的に背景色を入れています。 bodyが白、#containerがピンク、#mainが緑、#footerが青です。 --------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <style type="text/css"> <!-- html{ height: 100%; } body{ height: 100%; text-align: center; background: #fff; } * html div#container{ height: 100%; } div#container{ width: 80%; margin: 0px auto; position: relative; min-height: 100%; text-align: left; background: #fee; } body > #container { height: auto; } div#main{ padding-bottom: 30px; background: #efe; } #foot{ position: absolute; bottom: 0px; height: 30px; width: 100%; background: #eef; } --> </style> </head> <body> <div id="container"> <div id="main"> <h1>見出し</h1> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> </div> <div id="foot"> フッター </div> </div> </body> </html> --------------------------------------------------------------------- これでIE6/7、Firefox2.x、Opera9.x、Safari3.xでコンテンツ全体がセンタリングになるのですが。 ちなみに、念の為、DOCTYPE宣言を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> にした状態でも試してみましたが、結果は同じでした。 > 作成する上でホームページ・ビルダー10を使っているのですがこれは関係あるのでしょうか？ ビルダーは使用していないのでわかりかねます。ただ、これも念の為お聞きしておきますが、「センタリングされない」という状態は、実際に各ブラウザで表示した結果であり、ビルダー上のデザイン・ビューにおいての事ではないですよね？ オーサリング・ツールの設定でソースを自動改編する様な設定になっていなければ（なっていたとしてもこういう点に影響がある様にも思えませんが…）そこに原因があるとは考えにくいのでは。 > この場合のcontainerをrelativeにする理由がよくわかりません。relativeは相対位置、absoluteは絶対位置とのことですが、absoluteに変更してはいけないのでしょうか？ では上記のサンプルの"position: relative;"を"position: absolute;"に変えてみて下さい。面白い事がおきますよ。
その他の回答 (3)
- cyokodog
- ベストアンサー率56% (13/23)
参考サイトのサンプルのDOCTYPEは以下のようになってますが、同じでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> "http://www.w3.org/TR/html4/loose.dtd" ←この部分が重要 同じなら下記のような記述でできると思うのですが。。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> html{ height:100%; } body{ height:100%; margin:0; } #contents{ width:50%; margin:0 auto; background:#eee; position:relative; min-height: 100%; } * html #contents{ height:100%; } body > #contents{ height: auto; } #main{ padding-bottom:100px; } #foot{ height:100px; background:#aaa; position:absolute; bottom:0; width:100%; } </style> </head> <body> <div id="contents"> <div id="main">main</div> <div id="foot">foot</div> </div> </body> </html>
- abril
- ベストアンサー率69% (388/560)
おそらく前回の質問で参考にされた下記のサイトのテンプレートを使ってらしゃるのですよね？ http://www.stylish-style.com/csstec/ultimate/fix-foot.html 参照先サイトのテンプレートはDOCTYPEがHTML 4.01 Transitionalなので、あのままでもセンタリングに見えていますが、質問で見られる不具合からしておそらく質問者様の作成しているコンテンツはDOCTYPEがXHTMLではありませんか？参照先のサイトのテンプレートをコピーしてXML宣言付きのXHTML 1.1文書にして表示すると、IE6/7ではコンテンツ全体が左寄りに表示されます。 > body内を中央表示にすればいいとのことで試してみたのですが、メインが中央表示になることはあってもフッダーは左揃えのままでした。 bodyに"text-align: center;"を追加してみると、XML宣言付きのXHTML 1.1文書上では： ・メインはコンテンツ全体がセンタリング ・フッターは「開始位置」がセンターに（つまりメインに対してフッターが右に大きくずれている） というIE6/7での表示になります。 ちなみにこの状態でXML宣言をなしにすると、フッターもメインと同様にセンタリングされます。 XML宣言有りの状態のままであれば、一例として以下の様な解決策があります。 ※以下のCSSのソース及びHTMLの大枠は参照先サイトからの抜粋です。CSS中での”←”の部分が今回の不具合を解決する為に追加した箇所です。 【CSS】 html{ height: 100%; } body{ height: 100%; text-align: center;←"margin: auto;"が効かないIE用対策 } * html div#container{ height: 100%; } div#container{ width: 80%; margin: 0px auto; position: relative; min-height: 100%; text-align: left;←親要素bodyでセンタリングされたテキストを左寄せに戻す } body > #container { height: auto; } div#main{ padding-bottom: 30px; } #foot{ position: absolute; bottom: 0px; height: 30px; width: 100%; } 【HTML】 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html lang="ja"> <head> <title>サンプル</title> </head> <body> <div id="container"> <div id="main"> <h1>見出し</h1> <p>テキスト</p> </div> <div id="foot"> フッター </div> </div> </body> </html> これでIE6/7、Firefox2.x、Opera9.x、Safari3.xでの表示結果は同様になります。 本件の様に、同じCSSを参照していても、DOCTYPEやXML宣言の有無が変われば表示結果が変わってくる場合がありますのでご注意下さい。
- cyokodog
- ベストアンサー率56% (13/23)
DOCTYPE宣言と#containerのwitdhは指定されてますでしょうか？ ↓こんな感じでいかがでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> #contents{ width:50%; margin:0 auto; background:#eee; } #main,#foot{ height:100px; } </style> </head> <body> <div id="contents"> <div id="main">main</div> <div id="foot">foot</div> </div> </body> </html>
補足
回答ありがとうございます。 さきほど状況説明足りなかったのですが、 下記の回答者様が記している参考サイト様のように、 フッダーを最下部に固定した上でセンタリングしたいと思っています。 解決策がありましたらよろしくお願いします。
補足
回答ありがとうございます。 DOCTYPEはHTML 4.01 Transitionalなのですが、 参考サイト様のCSSおよびHTMLを丸ごとコピーしてみてもセンタリングされません。 作成する上でホームページ・ビルダー10を使っているのですがこれは関係あるのでしょうか？ それと、直接関係ない話ですが、 この場合のcontainerをrelativeにする理由がよくわかりません。 relativeは相対位置、absoluteは絶対位置とのことですが、 absoluteに変更してはいけないのでしょうか？ 質問度重なってすいません。