- ベストアンサー
３番目のBoxがずれる理由とは？
warpspaceの回答
box2のCSSを少し変更。 #box2{ margin-left: 160; ↓ #box2{ float:left; margin-left: 22;
関連するQ&A
- 特殊なカラムのデザイン設定について
いつもお世話になっております。閲覧ありがとうございます。 実は新しいことに挑戦して自己解決できず、宜しければお知恵をお借り頂ければと思います。 どのようなことかと言うと １．左カラムの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
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- CSS
- IE10でのbox-sizingの書き方
IE10で、box-sizing:border-boxが効かなくて困ってます。 例えば、以下のようなソースのhtmlを書いた場合です。 <!DOCTYPE html> <html> <head> <style type="text/css"> *{ margin: 0px; } html, body{ height: 100%; width:100%; } #container{ padding-bottom: 24px; height: 100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #box{ height:100%; width:100%; background-color: blue; } </style> </head> <body> <div id="container"> <div id="box"> </div> </div> </body> </html> 以上のように書くと、chromeやSafariでは、blueの#boxの下側に24pxの隙間ができて、border-boxが効いているのがわかるのですが、IE10では、隙間が出来ません。 いろいろボックスの位置とか変えて試しましたが、IE10でbox-sizingが効くことがない様子だったので、根本的にbox-sizingの書き方が間違ってるのか、他に何か大事な設定が抜けているのか、それとも仕様変更があったのか、わからないのです。 ネットで調べても、それらしい答えは見当たりませんでした。 どなたか、ご教授願います。
- ベストアンサー
- CSS
- inlineでテキストの入ったボックスを横に並べる
いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1～6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします！！ <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>
- ベストアンサー
- HTML
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- ＣＳＳでテーブルを作る方法について
CSSでテーブルを作る方法についてアドバイスお願いします。 今、外CSSで、テーブルを作成しようとしているのですが、cssがhtmlに反映されていないようです。２つボックスを並べたいです。 .box1{ float: left; background-color: #cc0000; width: 200px; height: 200px; } .box2{ float: left; background-color: #d0dcdf; width: 200px; height: 200px; } htmlには、 <div CLASS="box1"></div> <div CLASS="box2"></div> と書きました。 どこが問題なのかどなたかご指摘いただけますでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- ベストアンサー
- HTML
- Fire foxで2カラムの表示が乱れる
こんにちは。 閲覧していただいてありがとうございます。 現在会社のサイトをコーディングしています。 IEでは問題なく表示されるのですが Fire foxで確認したところ、2カラムの部分の表示が乱れてしまいます。 具体的に言うと、 メニュー（左側）の横にメイン（右側）が並ぶ状態が メニュー（左側）の下に回り込んでしまう状態です。 floatの設定に問題があるのかなと思うのですが どうも分かりません； 以下がソースになります。 申し訳ないのですが、少し急いでいるので お早めにご教授いただけると助かりますm(_ _)m ＜HTMLソース＞ <div id="layout"> <div id="header">ヘッダー</div> <div id="contents"> <div id="menu">メニュー（左側）</div> <div id="mein">メイン（右側）</div> </div> <div id="footer">フッター</div> </div> ＜CSSソース＞ #layout{ margin:0px; padding:0px; width:762px; text-align:left; background-color:#fff; border-right:1px solid #ccc; border-left:1px solid #ccc; } #header{ margin:0px; padding:0px; } #contents{ margin:0px; padding:0px; width:760px; } #menu{ margin:0px; padding:0px; width:190px; line-height:1.5em; float:left; background-color:#f4f4f4; border-right:1px dotted #ccc; border-left:1px dotted #ccc; border-bottom:1px dotted #ccc; } #mein{ margin:0px; padding:15px; width:550px; float:left; } #footer{ margin:0px; padding-left:195px; width:760px; clear:both; border-top:1px dotted #ccc; line-height:1.3em; }
- ベストアンサー
- HTML
- ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- CSS 左右違う大きさのボックスでheightを合わせたい
外部CSSでHPを作成しています。 基本的なことかと思いますが、調べてもどうしてもうまくいかないので 皆さまのお力をお貸しください。 左右にボックス（で良いのでしょうか？）を置き、その中にテキストを入れています。 それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。 固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。 どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか？ また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか？ どうぞご教授ください。 よろしくお願い致します。 /*CSSファイルの記述*/ .waku1{ border : solid 1px #999999; border-bottom: none; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku2{ border : solid 1px #999999; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .waku3{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku4{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .clear{ clear : left; } /*HTMLファイルの記述*/ <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku3"></div> <div class="waku4"></div> <div class="clear"></div>
- ベストアンサー
- HTML
お礼
すばやいご指摘 ありがとうございます。 右からしか考えていませんでした。