- ベストアンサー
floatを使ったレイアウトのくずれについて
ran_2323の回答
- ran_2323
- ベストアンサー率43% (32/73)
＃3です。 「#main02」の中に「.content」があるということでいいでしょうか。 #main02{ float:left; width:410px; } #main02 .content{ padding: 20px 50px 20px 50px; } というかんじです。 IE6や古いIEは、どうもwidthに対するpaddingの解釈方法が他のブラウザと違うようです。IEが間違っているんですけどね。 なので、CSSで組むときも、あまりがちがちにwidth指定をして組むのはズレも元で、ブラウザチェックも大変です。 質問者さんの提示されたソースを自分環境で検証してみたところ、全てのブラウザでレイアウトがズレてしまっていたので、CSS指定の仕方に混乱があるように思いました。 Dreamweaverはあまり信用せず、ブラウザでファイルを開き、全ての要素に「border:1px #ccc solid;」を入れて要素のズレが何が原因で起こっているのかを見たほうがいいと思います。 FirefoxにはCSS構造を表示してくれる便利なプラグインがたくさんあるので、それを見てみてもいいと思いますよ。
関連するQ&A
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- 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
- floatすると親要素より横にずれてしまいます
#contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li> </li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li> </li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30"> </td></tr></table></div> </div> </div> </body>
- 締切済み
- HTML
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- 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
- 並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- 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
- backgroundで文字がうまくおさまらない
お世話になります、CSS初心者ですので、 質問内容に不明瞭な点がございましたら、ご容赦くださいませ。 上記のように、テキストで文字を書いてバックグラウンドさせたいのですが、 文字が画像から外れた位置に配置されたりしてしまいます。 尚、作った画像は4段重ねるように配置したいです。 解決策をご教授下さいませ。 （HTMLコード） <BODY> <div id="container"> <div id="header"> </div> <DIV id="main"> </div> <div id="left"> <p>軽量鉄骨プレハブ</p> <div class="left_keitetu"> <p class="left_keitetu"><a href="/seihin/top.htm">製品詳細</a><br> <a href="/sekou/01-keitetu/top.htm">施工一覧</a></p> </div></div> <div id="footer"> </div> </BODY> （CSSコード） div#container { width : 725px; margin : auto;} div#header { width : 725px; margin : auto;} div#main { width : 725px; margin : auto;clear : both; padding : 0 10px; } div#footer { width : 725px; margin : auto;clear : both; margin-bottom : 5px; background : url(img/footer_bg.gif) repeat-x; height : 55px; padding-top : 17px; } div#left { float : left; } div.left_keitetu { height : 80px; width : 170px; } p.left_keitetu { background : url(img/menu_keitetu.gif) no-repeat; padding-top : 30px; padding-left : 15px; }
- ベストアンサー
- CSS
- リストタグを用いた縦メニューで画像に隙間ができます（IE6）
いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }
- ベストアンサー
- HTML
お礼
ご意見ありがとうございます。 まず、子要素にはfloat:left;は不要なのですね。 でも、やはりpaddingが効きません。 ＜あまりがちがちにwidth指定をして組むのはズレも元 パーセントで指定したほうがいいのかもしれませんね・・ ＜自分環境で検証してみたところ、全てのブラウザでレイアウトがズレてしまっていたので そうですか！？ わたしが見たところは、当初書きましたように、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 ご指摘いただいたようにボーダーを入れてみると、やはり左ボックスのmain02が指定した幅よりぐんと伸びておかしいです。 CSSって難しいですねえ(・_・;) でも、とことん追求してみたいと思います。 ありがとうございましたm(__)m