- 締切済み
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の設定が間違っているのでしょうか? よろしくお願いします。
- noonenou
- お礼率71% (25/35)
- ブログ
- 回答数2
- ありがとう数1
- みんなの回答 （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はもちろんコンテンツの最下部に指定しています。
関連するQ&A
- ３列コラムのデザインがブラウザによって崩れてしまう
３列コラムのヘッダーフッター構成でページを作ったのですが ＩＥ８では問題なく表示されるのですが…（Firefox３でも問題なく表示されます）ＩＥ８以下のバージョンのブラウザでは、デザインが崩れてしまうのです… どこがおかしいのか分からず…ＣＳＳを書き出してみますので、アドバイスよろしくお願いいたします。 デザイン： ●Topページのみ３列コラムで、その他は２列コラムになっています その為、センター部分を.centと.cent2で分け、横幅を変えて調整しました。。 ●フッター部分はナビ部分とコピーライト部分と２つになっています。 .head { background-color: #ffffff; width: 100%; height: 113px; } .main （コラム全体） { width:100%; background-color: #ffffff; border: 0px; } .left （左コラム） { float:left; width:170px; background-color: #ffffff; padding-right: 10px; } .cent （センターコラム topのみ） { float:left; width:421px; padding: 0px 10px 10px 15px; } .cent2 （右コラム 他ページ） { float:left; width:591px; padding: 0px 15px 10px; } .right （右コラム topのみ） { float:left; width:175px; } .foot_menu （フッターナビ部分） { width:100%; clear:both; background-color: #FFFFFF; } .foot （フッターコピーライト部分） { clear:left; height: 42px; background-image: url(コピーライト用画像); background-repeat: no-repeat; } その他補足が必要な場合はおっしゃって下さい。 よろしくお願いいたします
- ベストアンサー
- HTML
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- CSS、ブラウザの幅が狭まったときの表示
CSS学習中です。 ブラウザの幅が狭まったときの表示について教えてください。 現在、CSSファイルで以下のように書いています。 【test.css】 #alpha, #beta, #gamma { position: relative; display: inline; float: left; } #alpha { width: 300px; background: #f00; } #beta { width: 100px; background: #0f0; } #gamma { width: 100px; background: #00f; } このCSSを使い、 <body> <div id="alpha"> Alpha </div> <div id="beta"> Beta </div> <div id="gamma"> Gamma </div> </body> と表示させています。 ブラウザの表示幅が広いときは同じ行に Alpha Beta Gamma と並ぶのですが、ブラウザの表示幅を狭めると、入りきらないGammaが下の行に表示されます。 そうではなく、入りきらない部分は表示されない（表示が欠ける）様にしたいのですが、どのようにすればよいのでしょうか？ ブラウザはIE6を使用しています。
- ベストアンサー
- HTML
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- 3カラムレイアウトで隙間
下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。
- ベストアンサー
- HTML
- アメブロcss 3カラムを2カラムに変更の仕方
アメブロカスタマイズについて。 現在アメブロの3カラムをcssを編集し2カラム右メニューにしようとしているのですが、 上手く2カラム右メニューに表示出来ません。 まずサイドバー項目を右に全てずらし、左は空とし、 #sub_a{display:none;}として、 #mainの幅を拡大し2カラム左メニューは問題なく出来たのですが、 メニューを右にずらす事が出来ておりません。 感覚としては#mainは動かせているのですが、#sub_bがびくともしないような感覚です。 現在のcssは以下のようになっており、表示としては#sub_bも#mainも左に寄っており、 #sub_bの下に#mainが表示されている状態です。 具体的にどの点を修正すれば2カラム右メニューとなりますでしょうか？ #main{ float:left; width:673px; left: 0px; top: 0px; } #sub_main{ width:100%; overflow:hidden; } #sub_a{ display:none; } #sub_b{ float: right; width:200px; margin-left: 688px; top: 0px; z-index: 100; }
- 締切済み
- ブログ
- safariやFirefoxで右のカラムが下へ行ってしまう
CSSで A B C D という4つのカラムでレイアウトしたいので下記のようなCSSにしました。 ------------------------------------------------ #A{ width:700px; } #B{ float:left; padding-top: 15px; width: 150px; height: 100%; } #C{ float:right; text-align: left; width: 550px; padding: 15px 50px 30px; } #D{ position:relative; width:100%; height:50px; clear:both; text-align:center; } ------------------------------------------------ IEでは問題ないのですが、safariやFirefoxでは A B C D となってしまい、BとCが並んでくれません。 Cはテキストのみなので画像等のサイズオーバーでカラム落ちしているわけではなさそうです（長いURLなどもありません） Cのfloat:right;を消すと並んでくれるのですが、そうするとどういう訳かpaddingの指示が無視されてピッタリくっついてしまいます。 IEよりもsafariの方がCSSでは正しいそうなので何か間違っているのだと思うのですが、どなたかご教授ください。
- ベストアンサー
- CSS
- 特殊なカラムのデザイン設定について
いつもお世話になっております。閲覧ありがとうございます。 実は新しいことに挑戦して自己解決できず、宜しければお知恵をお借り頂ければと思います。 どのようなことかと言うと １．左カラムのheight部分を100％表示して、position:fixedを使って位置固定とスクロールしないメニュー画面を作りたい。 ２．左カラムにマウスを乗せるとカラムが右に若干スライドするようにしたい。スライド時、右カラムも左カラムが動いた分、スライドします。 以上のようなWEBサイトを作りたいのですが・・・項目１の部分で躓いてしまいました。 実は左カラムの部分に右カラムが隠れてしまっています。 解決策として左カラムの背面にボックスを作って解決しようとしましたが、別の問題が発生しました。 ブラウザのサイズを狭めてスクロールさせると右カラムが左カラムに隠れてしまいます。 どなたか解決案を頂けませんでしょうか。 お手数おかけ致しますが、何卒ご教授お願い致します。 【HTML】 <body> <div id="MasterColumn"> <!--<div id="LeftColumu_z1"></div>--> <div id="LeftColumu_z2"> <ol> <li>コンテンツ１</li> <li>コンテンツ２</li> <li>コンテンツ３</li><!-- サブコンテンツ１ --> <li>コンテンツ４</li><!-- サブコンテンツ２ --> </ol> </div> <header> <div id="LeftHeader"> <h1>タイトル</h1> </div> <div id="RightHeader"> <ol> <li>１</li> <li>２</li> <li>３</li><!-- サブコンテンツ１ --> <li>４</li><!-- サブコンテンツ２ --> </ol> </div> </header> <div id="RightColumu"> <h2>コンテンツ２</h2> <h3>コンテンツ３</h3> <h4>コンテンツ４</h4> </div> <footer>フッダー</footer> </div> </body> 【CSS部分】 body{ background-color: #FFE9E7; background-image: none; background-position: top left; background-attachment: fixed; font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif; /* フォントを設定 */ color: #333; margin: 0; padding: 0; line-height: 1.5; } #MasterColumn{ width: 1200px; margin-left: auto; margin-right: auto; } #LeftColumu_z1 { float:left; width: 200px; height: 100%; background-color: #FFFFFF; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftColumu_z2{ float:left; position: fixed; width: 200px; height: 100%; background-color: #2C2B30; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header{ float: left; width: 1000px; height: 80px; line-height: 80px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftHeader{ float: left; height: 80px; width: 700px; background-color: #FFFFFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #RightHeader{ float: left; width: 300px; height: 80px; background-color: #920832; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header h1{ display: inline; } header ol,li{ display: inline; } #RightColumu { float: left; width: 1000px; height: 1000px; border: dashed 1px #999; margin: 0; padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { float: left; width: 1200px; background-color: #2C2B30; color: #FFFFFF; text-align: center; }
- 締切済み
- CSS
- 3カラム IE 右落ち
現在幅固定３カラムでサイトを作っているのですが、私のマック環境（safari&Firefox）ではちゃんとレイアウトが整うのにwindowsのIE 7,6,5ではどれも右のボックスが左下に落ちてしまいます。 CSSはもともと #container { margin:0px auto; width:1000px; text-align:left; } .wrapper { width:800px; float:left; } /* 左 */ .left { float: right; width:200px; } /* 中央 */ .main { float: right; width:600px; } /* 右 */ .right { float: left; width:200px; } /* フッター */ .footer { width:100%; clear:left; } で、これに左右にmargin-left:15px;などを入れていたので、それが原因かと思いdisplay: inline;を足してみたり外してみたのですが変わらず、 左右のボックスの中に<div></div>で囲ったフレーム素材の中にカテゴリーなどをいれているので、そこにmarginやpaddingが発生しているので今度は上記のwidthをちょっと変えてみました。 現在wrapperは780px 左190px 中央580px、右181pxとしてかなり右に余裕を持たせて、尚かつ右で使用していたフレーム素材を全て取り外し１行文字のみだけで試してみたのですが、全然右に上がってきてくれません。 またwidthに余裕を持たせてborderを使ってそれぞれの位置を確認したのですが、右にはかなりのスペースがあいているのに、右に上がってきてくれないのです。 一体何がいけないのでしょうか？？ どうかお力をお貸しください。宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- フロートを利用した2カラムレイアウト
お世話になります。 HTML＋CSSにてサイト制作をしております。IE6のバグだと思うのですが、フロートを利用した2カラムレイアウトの段組みの間の空き具合をうまく調整することができません。なぜでしょうか？？ 形は、左右の2カラムで成り立っており、右半分に重要なコンテンツ部分（主にテキスト）、左半分にメニューをおいています。 【HTML】 <div id="wrapper"> <div id="right"> □□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□(重要テキスト) </div> <div id="left"> □□□□□□□□□(メニュー） </div> </div> 【CSS】 #wrapper{ width:800px; background:url();←省略 } #right{ float:right; width:680px; } #left{ float:left; width:100px; } という感じです。それで、800px－(680px＋100px)＝20pxを左右の段組みの間に空きスペースとして確保したいのですが、IE6だとうまくいきません。 Firefox,safariなどでは、仕様通り左カラムは左に寄り、右カラムは右によるため、左右の段組みの間に20pxの空きが出るのですが、IE6だと左右の間にスペースはなく、かわりに右カラムの右(つまり、一番右）が空いてしまうのです。 floatを両方ともrightにして左カラムに右マージンorパディングを入れてみたのですが、今度はカラム落ちしてしまいます。 どうすれば、IE6で左右の間にスペースがある2段組みができるのでしょうか？？なにか根本的に間違ってるのでしょうか？
- ベストアンサー
- HTML
お礼
何度もお返事ありがとうございます。 どうも、スタイルシートの記述自体は合ってるような感じですね。変数はちょっとコピーしたり消したりでそれが少し反映してしまっていたりするのかもしれません。 幸い、メインページとスタイルシートしかいじっていないし、デフォルトのソースも保存していますので、どうしても解決しないようならもう1度白紙から始めることにします。