- 締切済み
横スクロールサイトの中央寄せ
お世話になります。 http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html 上記サイトを参考に横スクロールのサイトを作っているのですが、 中央寄せがうまく出来ません。 上記サイトのCSSで .page { margin:0px; bottom:0px; width: 2000px; // ページ幅を大きめに！ float: left; height: 100%; } ここの部分で幅が2000pxに設定してしまうので、それ以下の幅にしても中央寄せになってくれないのです。 何かいい手はないでしょうか。ご教示ください。 よろしくお願いします。
- akk1111
- お礼率100% (2/2)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
float:leftが原因です。
関連するQ&A
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？
- ベストアンサー
- CSS
- margin div 中央寄せ
div内の文字ではなく、div事態をページの中央に寄せたいのですが、 なぜか div.test{ margin-top:100px; margin-bottom:100px; vertical-align: middle; } だと中央寄せにならないし、 div.test{ margin-top:100px; margin-bottom:100px; margin: 0 auto; } だと、 margin-top:100px; margin-bottom:100px; が無視されます。 上下の幅を設定し、更にdivを中央に表示するにはどうすればいいですか？
- ベストアンサー
- CSS
- 中央寄せが出来ません。
下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか？ アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }
- ベストアンサー
- HTML
- 2カラムサイト高さ100% 左右別々にスクロール
サイトの構成は2カラムのみのサイトで、左にナビ、右にコンテンツになります。 左右どちらもheight100%で、両方とも縦に別々のスクロールを行いたいと考えております。 そこで、main（左）とsub（右）を作りfixedで固定し、100%にしました。 その中に固定したエリアを導入しスクロールバーを表記させようと思い下記のような記述をいたしました。 main_sとsub_sのheightをpxで表記するとうまく動作します。 しかし、%にするとスクロールバーが表示されずfixedの影響で画面が固定されてしまいます。 #main{ float:left; width:400px; position: fixed; background-color:pink; height: auto; min-height: 100%; } #main_s { height:90%; overflow-y:scroll; } #sub{ float:left; width:300px; position: fixed; background-color:yellow; height: auto; min-height: 100%; margin-left:400px; } #sub_s { height:90%; overflow-y:scroll; } 左右のカラムを別々にスクロールをさせたいのですが、お力添えいただけたら幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSで、height:100%の中央寄せ
白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。 本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、 html, body, containerのそれぞれにheight:100%、 親要素にmargin, padding 0を指定したところ、 画面をスクロールさせたところから緑色の背景色が消えています。 どのようにすれば解決できるのでしょうか？ *{ margin:0; padding:0; } html, body{height:100%;} #container { height:100%; width:800px; background-color:#0A0; margin:0px auto; }
- ベストアンサー
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- css box ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css"> <!-- body { background-color: #EEEEEE; } .mainbox{ width:900px; height:1000px; padding:6px 6px 2px 2px; border:8px; margin-left: auto; margin-right: auto; text-align:left; background-color:#bde9ba;} body { overflow: hidden; } --> </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？ IE迷惑ですｗ
- ベストアンサー
- CSS
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- CSSでボックスを中央に表示させたい
CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。
- ベストアンサー
- CSS
- 疑似インラインフレームを中央に配置する方法
疑似インラインフレームを中央に配置する方法 疑似インラインフレームを画面中央に配置する方法を教えてください。 ちなみに、以下のような記述を試してみたのですが…。 【css】 body { text-align: center; margin-top: 100px; color: #555555; font-size: 10px; font-family: "ＭＳ Ｐゴシック"; } *{ margin:0px; border:0px; padding:0px; line-height:100%; } .box{ text-align: center; padding-bottom: 50px; } .box_scroll{ text-align: center; width: 300px; height: 200px; padding: 10px 10px; overflow: auto; } 【xhtml】 <div class="box"> <img src="img.jpg" width="100" height="50" alt="img" /> </div> <div class="box"> <div class="box_scroll"> ---文章--- </div> </div> 初めの<div class="box">は中央に配置されるのですが、疑似インラインの部分は左に寄ってしまいます。 他にも他の方の質問を参考に試してみたのですが、初心者の為いまいちよくわからず、うまくいきませんでした。 どうか回答よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 確かにfloat:left;を解除すると真ん中に寄りましたが、横スクロールも解除されてしまいます。 横スクロールを維持したまま中央寄せは出来ないものでしょうか。