- ベストアンサー
HP作成2段組みレイアウトで、サイドバーがはみ出る
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
main,footer,sideが固定されていませんね。 スタイルシートでの宣言が必要です。
関連するQ&A
- ie7の印刷レイアウトがくずれます。css対策
質問です。 印刷についてのIE7対策をうかがいたいです。 画面上はまったく問題ないのですが、 いざ、印刷となると崩れてしまいます。 フッターがメインメニューの半ばまで せりあがって （崩れた形）で印刷されてしまいます。 たぶん3のメニューが短いからか... (今後 a-2 が更新する可能性があるためにheightはautoに してありますが。。) 対策としてはどうしたらよいでしょうか？ よろしくお願いします。 ※print用のcss はすでに作成しています。 IE8,ＦＩＲＥＦＯＸについてはフッターを css改行コードに強制改ページさせることにより 修正は成功しています。 メイン部分のレイアウトとしてはこういった感じです。 http://css.uka-p.com/3column/image.html レイアウトの順番としては。 0コンテナでつつんでます。 1ヘッダー height=auto 2メイン height=auto float: right; （内部）a-1 右エリア height=auto float: right; （内部）a-2 メインの部分 height=auto float: none; 3左メニュー height=auto float: left; 4フッター height=auto clear:both; ちなみに画面上では ie6,ie7.firefoxはまったく問題が ありません.... よろしくお願いします。
- ベストアンサー
- CSS
- CSSの三段組みレイアウトについて教えて下さい。。
CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？
- 締切済み
- CSS
- スタイルシート float
スタイルシートを使って左右分割のページを作ろうと思っています。 #left{ width:170px; float:left; } #right{ float:right; } としたところ、 ブラウザ（IEです）を余裕を持たせているときは正常表示されますが、 左画面 ｜ 右画面 ウインドウ幅を狭くすると、 右側にくる部分が、画面上に、 左側にくる部分が、画面下に、 右画面 -------- 左画面 上下に分割された画面となってしまいます。 これを、ウインドウ幅を狭くしても 左右分割に保つようにするにはどうしたら良いのでしょうか？
- 締切済み
- HTML
- 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
- IE8でサイドバーのレイアウトが崩れる場合の対処法
CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。 簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。 しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。 どうにか解決する方法はありませんでしょうか？ 文章だと伝わりくいかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- CSS
- 【HP制作】２カラムを3カラムに変更したい！
現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。 現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。 ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、 画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。 因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、 どうしても(1)→(2)→(3)の順番になりません。 独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。 お分かりの方がいらっしゃったら、どうかよろしくお願いします。 初心者レベルなので、分かり易く教えて頂けると助かります。 どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right; ←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/ ←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div> <!--***** メイン部分 *****--> <div id="main"> </div> <!--*****// メイン部分 *****--> <!--***** 左サイドメニュー *****--> <div id="leftside"> </div> <!--*****// 左サイドメニュー *****--> <!--***** 右サイドメニュー *****--> ←ここを追加しました。 <div id="rightside"> </div> <!--*****// 右サイドメニュー *****-->
- ベストアンサー
- CSS
- 【CSS】IE6で印刷時にレイアウトが崩れる
大変困っています。 印刷を前提に作ったページではないのですが、 クライアントから印刷時にレイアウトが崩れて印刷できないとご指摘を受けました。 そこで、IE6とFirefoxで確認したところ、 Firefoxではレイアウトが崩れずきちんと印刷されますが、 IE6では2カラムの右側（メイン部分）が消えてしまっています。 （IE7は自分のオフィスでは入れてはいけないことになっているので、IE7では確認していません。） 何か問題があれば、ご指摘お願い致します。 <div id="container" class="clearfix"> <div id="siteSub"> ああああああ </div> <div id="siteMain"> いいいいいい </div> </div> ■CSS-------------------------------- div#container{ width: 950px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } div#siteSub{ margin: 0px; padding: 0px; width: 230px; display: block; float: left; } div#siteMain{ padding: 0px; float: left; width: 710px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } 右側のメイン部分が消えてしまっているので、 大雑把にレイアウト部分だけ書いてみました。 siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。 linkの部分は media="all"としています。 <link rel="stylesheet" type="text/css" href="css/import.css" media="all"> また、Yahoo! UI Libraryを参考にした、reset.cssも入れています。
- 締切済み
- HTML
- 教えてつかぁさい。ＨＰのレイアウトについて。
どうすればいいのですか？ｈｔｍｌ ・CSSのレイアウトについて教えてください 素人なのでうまく説明できないかもしれないですが、よろしくお願いします。 メモ帳を使い、会社のホームページを作成しました。 FC2の無料サーバーにアップロードし、IE8でホームページを開くと正常に表示されました。 CSS検証サービスなどもクリアーし、他のブラウザ(Opera,Firefox,Safari)でも問題なく同じレイアウトで表示されます。 ところが、私の使用しているパソコンとまったく同じ機種(ブラウザIE8、同じモニターサイズ、表示の設定なども一緒)のもう一台のパソコンでホームページを開くと、レイアウトが崩れてしまうのです。 わけがわからないので、とりあえずCSSにclear:bothなどのソースを追加し、そのファイル(メモ帳)を〔プログラムから開く〕でIE8で開くとレイアウトが崩れているのですが、そのファイルをサーバーにアップロードしてIE8(他のブラウザでも)でホームページを開くと正常に両方のパソコンで表示されるのです。違う機種のパソコンでも正常に表示されました。 そこで質問です。 そもそも、こういう事ってあるんですか？あるのなら回避方法を教えてください。それとも、このまま仕方なくサーバーにアップロードし、ホームページ上では正常に表示されるが、メモ帳から開くとレイアウトが崩れている、このファイルをこのまま使うのが良いのか、それとも何かほかに良い方法があるのでしょうか？ 分かりにくい長文になり申し訳ないのですが、どなたかお知恵をお貸しください。よろしくお願いします。社長に叱られます。
- ベストアンサー
- HTML
- IE6のみレイアウトがずれる。
IE6のみレイアウトがずれる。 CSSで下記のように指定しています。 現状のブラウザであればレイアウトが崩れないのですが IE6で見るとレイアウトが崩れるのです。 #my_navi #my_contentsL #my_contentsR の三つが横一列に並ばせたいのですが ● ←#my_navi ● ←#my_contentsL ● ←#my_contentsR の様にレイアウトが崩れてしまいます。 何か解決方法が有りますでしょうか? 宜しくお願い致します。 ↓CSSの記述 body { width : 100% ; float: center; display: inline; } #my_body { margin: 0 auto; width : 950px ; } #my_main { width : 950px ; } #my_header { width : 950px ; height: 100%; } #my_headerT { float : left ; width : 950px ; } #my_headerL { float : left ; width : 750px ; height: 260px; } #my_headerR { float : right ; width : 200px ; height: 260px; } #my_navi { float : left ; width : 190px ; display: inline; } #my_contents { float : right ; width : 750px ; display: inline; } #my_contentsL { float : left ; width : 550px ; display: inline; } #my_contentsR { float : left ; width : 190px ; display: inline; } #my_contentsF { float : left ; width : 750px ; display: inline; }
- ベストアンサー
- ブログ
- CSSによるリキッドレイアウトについて
Yahooの検索結果の画面は、左側がリキッドで右側のPR部分は固定幅になっています。 どういうCSSなのか見てみたら、左側の検索結果リスト部分のdiv(id="yschres")には #yschres{ width:100%; width:expression((document.all('yschft') )?document.all('yschft').offsetWidth:'100%'); } /* IE: min-width */ と指定してありました。 さて、サッパリわかりません。 このCSSの意味をご教授いただきたいと思います。 ちなみに、右側のPR部分のdiv(#yschec)には #yschec { width:220px; float:right; margin:0; padding:0;} というCSSが指定してありました。
- ベストアンサー
- HTML
お礼
ご回答、ありがとうございます。大変参考になりました。