- ベストアンサー
xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
・ steel_gray様のご指摘を参考にして修正してみました。 ・ 主な修正点は、 1. <?xml version="1.0" encoding="Shift_JIS"?> の削除。 IE対応のため。 2. 文字コードをutf-8に変更。 3. スペル間違い（heaber）。 ・ FirefoxとIEで確認しました。 ・ ２）subがカラム落ちしてしまっている？ これは、確認出来ませんでした。 ・ ファイルは１つにまとめた物で試してあります。 ------------------------------------------------------------ <!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"? lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- @charset "Shift_JIS"; * { margin: 0; padding: 0; } body { color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin: 0 auto; } /*==heaber==*/ div#header { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } ...
その他の回答 (2)
- tenderfeel
- ベストアンサー率56% (215/379)
<?xml version="1.0" encoding="Shift_JIS"?> xml宣言が入っている場合、IEは後方互換モードになるので margin:0 autoでのセンタリングが出来なくなります。 これを回避するには * html body {text-align:center;}などとして、センタリングする必要があります。 * htmlはIE6以下にだけ適用されるおまじないです。（つけなくても問題はありません） また、IEにはfloatしてる要素のmargin-leftとrightの値が倍になる 有名なバグがありますが、カラム落ちは大抵それが原因です。 これはmarginをpaddingにするとか、中の要素にmargin付ける等で回避出来ます。
お礼
ありがとうございます！ 解決できました！
- steel_gray
- ベストアンサー率66% (1052/1578)
中身はほとんど見てませんが。 IEで発生しているなら <xml>宣言があると（DOCTYPEが1行目にないと）互換モードになってしまうというIEのバグのせいではないですか？ http://www.infinity-dimensions.com/blog/archives/xhtmlcssie.html こちらが参考になるかも。 http://oshiete1.goo.ne.jp/qa1991120.html?ans_count_asc=0
お礼
中央寄せの問題は解決しました！ ありがとうございました！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございます！！ 解決できました！！ まだまだxhtml＋cssコーディング初心者の為 次から次へと問題が発生して大変ですが頑張ります！ とても解りやすいご指摘ありがとうございました(o^-^o)