- ベストアンサー
CSS/float内のセンタリング
ra_ra_raの回答
- ra_ra_ra
- ベストアンサー率36% (37/102)
.sideconteにmargin: auto;でどうでしょうか？
関連するQ&A
- floatの挙動について
いつもお世話になっております。 次のコードで#sidebody内に#a～cboxを左側に縦に並べ、#dboxを右側に配置したいのですが、 #dboxのfloatが#sidebodyに対して効きません。 原因を教えていただけませんでしょうか。 シンプルな構造なのに、何が問題なのか分かりません。 何卒よろしくお願いいたします。 <html> <head> <link href="test.css" rel="stylesheet" type="text/css" media="screen"> <body> <div id="content"> <div id="sidebody"> <div id="abox">a</div> <div id="bbox">b</div> <div id="cbox">c</div> </div> <div id="dbox">d</div> </div> </body> </head> </html> #content { width: 200px; height: auto; border: red solid; } #abox { width: 100px; height: 20px; background-color: blue; text-align: center; color: white; } #bbox { width: 100px; height: 100px; background-color: pink; text-align: center; color: white; } #cbox { clear: both; width: 100px; height: 100px; background-color: darkblue; text-align: center; color: white; } #dbox { width: 100px; height: 250px; float: left; background-color: green; text-align: center; color: white; }
- ベストアンサー
- CSS
- xhtml+cssのfloatの使い方、センタリングの方法
xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 (下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に さらにfloatさせてleft、lightの２つ横並びのボックスを 配置することは可能でしょうか？ また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。
- 締切済み
- HTML
- CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- ベストアンサー
- HTML
- CSSでテーブルを使わずにレイアウト
以下のソースでなんとかレイアウトできたのですが 左よせではなくセンターよせにしたいのですがどのように記述すればよいでしょうか？CSSの対応していないブラウザの場合にメニューを下部メニューにしたいため p.menu は下部に記述しています。 -- css -- body { width:700px; margin:0px; font-size:12px; color:#ffffff; } p.head { height:15px; margin:0px auto; background-color:#0000ff; } .text { width:500px; text-align:left; margin:0px 0px 0px auto; background-color:#aa0000; } p.menu { width:200px; background-color:#dddddd; position:absolute; left:0px; top:15px; } -- html -- <body> <p class="head"> タイトル </p> <div class="text"> あいうえおかきくけこ </div> <p class="menu"> <a href="">menu1</a> </p> </body>
- ベストアンサー
- HTML
- cssでメインコンテンツをセンタリングする方法
cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } （1）「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか？ ＞ body { text-align: center; } ＞ （2）また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか？ (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか？ 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440
- ベストアンサー
- CSS
- CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。 以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box{ background-color:#0099CC; width:400px; padding: 0px; } #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; } #A{ background-color:#990000; float:left; width:100px; } #B{ background-color:#003366; width:100px; } #C{ background-color:#336600; width:100px; } --> </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- CSSでのブロック要素に囲み線
下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素（#lineの部分）にborderを設定するとマージンができてしまうのですが、なぜでしょうか？border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- #line { background-color:yellow;border:1px solid #808080;} #header { background-color:#23819e;text-align:center;} --></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
お礼
ありがとうございます。OKでしたが、text-align: centerではだめなのですね。