- 締切済み
CSSの段組で要素がかけてしまいます
いつもお世話になります。 今CSSで段組をしています。 #content{ width:780px; height:auto; } #content{ float:left; width:440px; padding-left:20px; padding-right:20px; } #menu{ float:right; width:440px; padding-right:20px; } で左右のボックスを作り、 それぞれにテキストや画像などの子要素を入れていきます。 html <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> <div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> <div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </html> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんとおさまるのですが、 IE（６，７とも）右の3番目(sub5)の要素が欠落し、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 どうしたらいいでしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。
- tomoyamma
- お礼率98% (99/101)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
前者さまも指摘していますが まず、CSSで #contentが２つあります。 次に、 <div id="main"> <div id="menu"> ↑ ここに全角があります。 </body>も付けて下さい。 粗探しで申し訳ありませんが、正しく直すだけで自分で解決出来たり または、修正して再質問した方が良いでしょう。
まず#contentの指定が2つあります。多分片方は#mainだと思うのでソースをそのままコピーしたのなら直してみてください。 それとwidthに関しても#mainと#menuの幅が#contentより大きいです。 これも直してみてください。 divに限らずですが、IEの場合要素の中が空のままだと上手く動かないことがあります。 適当に文字を入れて、上記を直してもう一度確認してみてください。
お礼
ご指摘ありがとうございます。 修正して再質問します。
関連するQ&A
- CSS 段組で要素が表示されません
いつもお世話になります。 今CSSで段組をしています。 #content{ width:910px; height:auto; } #content{ float:left; width:440px; padding-left:10px; padding-right:10px; } #menu{ float:right; width:440px; padding-right:10px; } で左右のボックスを作り、 それぞれににsubを作ってテキストや画像などの子要素を入れていきます。 htmlは <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> <div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> <div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </body> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんと表示されているのですが、 IE（６，７とも）右の2番目(sub4)の要素を表示せず、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 全体の高さとしては右側の段組の方が高さがあります。 実際にはそれぞれのsubにテーブルやテキスト、画像などが入っています。 何が原因でしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。
- 締切済み
- HTML
- 【css】floatを指定するとはみ出します
ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？ それとも、自分の記述がおかしいのでしょうか？ 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }
- 締切済み
- HTML
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- padding-leftがききません。。。
padding-left効かないです...原因教えて下さい。 ソースは以下です。 <div id="right"> <div class="plofile"> </div> </div> #right { width:250px; float:left; overflow:hidden; } .plofile { width:190px; height:265px; padding-left:10px; float:left; margin-top:35px; background:url(plofile_bg.png); padding-left:20px; }
- 締切済み
- 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サービス）
- スタイルシートで上手く段組が出来ません。
スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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 { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか？ よろしくお願いしますm(_ _)m
- ベストアンサー
- その他([技術者向] コンピューター)
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- CSS
- 背景に影をつける方法（CSS）を教えてください。
以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }
- ベストアンサー
- HTML
- 段組みレイアウトがfloatleft上手くいきませ
先程の投稿は、一度削除させて頂きました。 再度、投稿しなおします。 なんとか、以下の画像のところまで持ってくることが出来ました。 おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。 以上２点です。 宜しくお願いします。 失礼致します。 こんにちは。ycqと申します。 html+CSSでサイトを作っています。 簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。 おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定 お時間がございましたら、どうぞ、宜しくお願いいたします。 失礼致します。 index.html*************************** <!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" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;
- ベストアンサー
- CSS
- CSS-paddingが反映されません
入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。
- 締切済み
- HTML
お礼
回答ありがとうございます。 修正して再質問します。