- 締切済み
2カラムデザイン～右側が落ちる～
Movable type 4.1＋SQLite2(ダイナミック・パブリッシング)をローカル環境(OS X Leopard 10.5.2)で動かしています。2カラムのデザインを作ろうと、以下のようにCSSを設定しました。 body {width:900px; } #alpha(左側の要素) {width:640px; float:left; } #beta(右側の要素) {width:220px; float:left; } #betaで囲んだ要素を#alphaの右側に表示させたいのですが、完全に落ちてしまいます。floatの設定が間違っているのでしょうか? よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Muller3
- ベストアンサー率81% (800/979)
ふと思ったのですが、どのようにデザインを作られてますか？ テンプレートを一から作られていますか？ それとも、デフォルトのテンプレートを元にカスタマイズする形で進めていますか？ もしデフォルトのテンプレートの上からカスタマイズしているなら、変数が絡んでいるかもしれません。 例えば、「ヘッダー」に入っている <body class="<MTIf name="body_class"><$MTGetVar name="body_class"$> </MTIf><$MTGetVar name="page_layout" default="layout-wtt"$>"（略）> これは、「スタイルシート（メイン）」に入っている /* Selected Layout: <MTSetVar name="page_layout" value="layout-wtt"> */ この記述を取得し、レイアウトを決定しています。 もし2カラムにする場合は、この記述を"layout-wt"とすれば、左が大きい2カラムになります。 で、スタイルシート（ベーステーマ）のcontainer-innerのwidthを900pxに、 各カラムの大きさは /* Wide-Thin */以下の .layout-wt #alpha .layout-wt #beta のwidthの数値をそれぞれお好みに変更するだけです。 もしまっさらにして一から作られているなら、footerの件も私の環境では再現できません。ちゃんとwrapperの幅に対して文字が中央揃えになります。 各divに背景色を設定して、divの範囲を確認してみてはどうでしょう。 また、footerにwidthを指定してみるというのはどうでしょう（サイドはまだ落ちるのでしょうか？） <div id="wrapper"> <div id="alpha">メイン</div> <div id="beta">サイド</div> <div id="footer">フッター</div> </div> #footer{ clear:both; width:860px; text-align: center; background-color: #666666; ←footer範囲確認用 } （略） あとは、スタイルシートの記述内に全角スペースが入っていて指定が無効になることがありました。テキストエディタに一度移して「全角スペース→半角」メニューなど使ってみてもいいかもしれません（特に行頭、行末は注意）
- Muller3
- ベストアンサー率81% (800/979)
試しにそのまま書いてみましたが、私の環境＜MacSafari3,Firefox2では落ちないので、何か別の部分に要因があるのかもしれませんが、とりあえずbody要素に幅を指定するのではなく、 <div id="wrapper"> <div id="alpha">メイン</div> <div id="beta">サイド</div> </div> #wrapper{ width: 900px; } 以下略 としてみたらどうでしょう。
補足
お返事ありがとうございます。<body>要素に直接幅を指定するのはまずそうなので、さっそく<div>要素で全体を囲むことにしました。今ふと画面を見ているのですが、 footer {clear:both; text-align:center; } としている要素の表示が、画面全体に対してテキストが中央寄せになっているのではなく、alpha要素に対して中央寄せになっています。footerはもちろんコンテンツの最下部に指定しています。
お礼
何度もお返事ありがとうございます。 どうも、スタイルシートの記述自体は合ってるような感じですね。変数はちょっとコピーしたり消したりでそれが少し反映してしまっていたりするのかもしれません。 幸い、メインページとスタイルシートしかいじっていないし、デフォルトのソースも保存していますので、どうしても解決しないようならもう1度白紙から始めることにします。