- ベストアンサー
floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- mrsan
- お礼率13% (3/22)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは コンテンツの有する幅は width + (左右)margin + (左右)padding + (左右)border の総和になります floatを使用する場合、親の幅より子の総幅が多いときには下に追いやられてしまうので総幅を計算しながら作らないといけません 後こういったレイアウトの場合、1つ1つをfloatレイアウトするのでは難しい・・・というか無理？なので(positionレイアウトなら別ですが) まず、左、中央、右の大きいコンテンツを配置してそれからその中の詳細なレイアウトを決めていきます <style type="text/css"><!-- .container { text-align:left; width:760px; margin:auto; background-color:#FFFFFF; } .content1 { width:758px; height:200px; border:1px solid #999999; } .box1,.box2,.box3,.box4 { width:176px; border:1px solid #CCCCCC; margin-bottom:5px; } .box5,.box6 { width:216px; border:1px solid #CCCCCC; margin-bottom:5px; } .news,.topics { width:344px; height:200px; overflow:auto; border:1px solid #CCCCCC; margin-bottom:5px; } .left-contents,.center-contents,.right-contents { padding:5px 0px 5px 5px; float:left; } --></style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <!--左側--> <div class="left-contents"> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> </div> <!--中央--> <div class="center-contents"> <div class="news"> あ </div> <div class="topics"> い </div> </div> <!--右側--> <div class="right-contents"> <div class="box5"> う </div> <div class="box6"> え </div> </div> <div style="clear:both;"></div> </div>
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞このfloatは私が希望するレイアウトには必要なのでしょうか？ 必要というか一番核の部分です ＞スタイルシートのfloatはどういう働きをするのでしょうか？ floatの説明について探してみたのですが見つけきれないのでお手数ですがhtmlファルにしてブラウザでお読みください 説明が足りてるといいですが・・・・ <style type="text/css"><!-- p { margin:0px; } .base { width:800px; background-color:lavender; } .left { float:left; width:200px; background-color:aqua; } .right { float:right; width:200px; background-color:aqua; } .box1 { background-color:LightCyan; } .box2 { background-color:yellow; } .box3 { background-color:Mistyrose; } .box4 { background-color:Palegreen; } .box5 { background-color:Thistle; } .sbox { width:200px; } .mbox { width:400px; height:30px; } .lbox { width:600px; height:60px; } .mgn { margin:10px; } --></style> <div class="base"> <div class="left">float:left;すると左に配置される</div> <div style="clear:both;"></div> </div> <p> </p> <div class="base"> <div class="right">float:right;すると右に配置される</div> <div style="clear:both;"></div> </div> 表示からそのように認識されてるのだと思いますが <p> </p> <div class="base"> width:800px;の箱の中に <div class="box1 sbox">width:200px;の【box1】</div> <div class="box2 sbox">width:200px;の【box2】</div> <div class="box3 sbox">width:200px;の【box3】</div> の小箱が３つあったとして <p> </p> float:left;とは<br> <div class="box1 left">width:200px;の【box1】:left</div> <div class="box2 left">width:200px;の【box2】:left</div> <div class="box3 left">width:200px;の【box3】:left</div> <div style="clear:both;"></div> このように『左上』から敷き詰めていく <p> </p> float:right;とは<br> <div class="box1 right">width:200px;の【box1】:right</div> <div class="box2 right">width:200px;の【box2】:right</div> <div class="box3 right">width:200px;の【box3】:right</div> <div style="clear:both;"></div> このように『右上』から敷き詰めていく </div> とこのような挙動をします <p> </p> また、子要素の総幅が親要素の幅より小さければfloat順は順不同で <div class="base"> <div class="box1 left">【box1】1番目に配置</div> <div class="box2 right">【box2】2番目に配置</div> <div class="box3 left">【box3】3番目に配置</div> <div style="clear:both;"></div> という風にもできます<br> これを利用して<br> <div class="box1 left">【box1】1番目に配置</div> <div class="box2 right lbox">【box2】2番目に配置</div> <div class="box3 left">【box3】3番目に配置</div> <div class="box4 left">【box4】4番目に配置</div> <div style="clear:both;"></div> という風にfloatでレイアウトできます<br> #2で個別では無理といったのはfloat順やheightなどで頭を抱える事になるからです<br> 特に質問のように真ん中が一番高かったり、heightがバラバラだと<br> <div class="box1 left">【box1】1番目に配置</div> <div class="box2 right">【box2】2番目に配置</div> <div class="box3 right mbox">【box3】3番目に配置</div> <div class="box4 left">【box4】4番目に配置</div> <div class="box5 right">【box5】5番目に配置</div> <div style="clear:both;"></div> という風にどう順番を変えてもきれいにレイアウトはできないのです <p> </p> またfloatを使用する上で注意しなければいけないのは実質の高さを取れないことです <div class="base"> <div class="box1 mgn left">←↑【box1】下地が分かるようにmarginを取ってます</div> <div class="mbox box2">IEはバグで【box1】の右側に配置されますがFirefoxなどでは【box1】の表示の下から表示が始まります</div> </div> <div style="clear:both;"></div> <p> </p> このようなレイアウト崩れを防ぐ為に要所要所でfloat解除する癖を付けておいた方がいいかもしれませんね<br> float解除すると <div class="base"> <div class="base"> <div class="box1 mgn left">←↑【box1】下地が分かるようにmarginを取ってます</div> <div style="clear:both;"></div> <div class="mbox box2">このように【box1】の表示終わりから次のコンテンツが表示されます</div> </div>
お礼
返事が遅くなってしまいすみません。 丁寧に教えていただきありがとうございます。 floatを理解することができました。 floatは難しいですね。
- solLight
- ベストアンサー率47% (30/63)
以下のようにしたら出来ました。IE以外はレイアウトが崩れますが・・・ <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> div#container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF; padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} div#left {float:left;} div#wrapper {width:530px; float:left;} div#middle {clear: both; float:right;} div#right {clear: both; float:right;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:160px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px;border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div id="container"> <div class="content1"> 画像 </div> <div id="wrapper"> <div id="left"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> </div> <div id="middle"> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> </div> </div> <div id="right"> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </div> </body> </html> このサイトを参考にしてみてください。 http://www.geocities.jp/multi_column/practice/3column1.html
お礼
ご回答ありがとうございます。 すごく良いですが、IE以外は崩れてしまうのが難点ですね。 参考にしたいと思います。。
関連するQ&A
- 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
- float & clear
質問の概要は以下の通りです。 CSSを使用しています。 可変長な画面を作成する際に、サイドバーを「float:left」で配置して「margin-left」でメイン画面を配置します。 さらに、メイン画面の中で「float:left」と「margin-left」を使って左と右に分けます。 このとき、メイン画面の中で、回り込みを防ぐために「clear:left」を使用します。 ところが、この「clear:left」がサイドバーの長さに影響されてしまい、おかしな空白ができてしまいます。 これを防ぐ方法はありますか？ もしくは、全体的に構造がおかしいならば、ご指摘ください。 すべてのソースをコピーするのは大変なので、主要な部分だけを以下に載せます。 <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; } #header{ border:1px #000000 solid; } #side{ margin:10px; float:left; width:200px; border:1px #000000 solid; } #infomation{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main-left{ float:left; margin:10px; width:250px; border:1px #000000 solid; } #main-right{ margin:10px 10px 10px 280px; border:1px #000000 solid; } #footer{ clear:left; border:1px #000000 solid; } .clear{ clear:left; } --!> </style> </head> <body> <div id="header"> title </div> <div id="side"> sidebar<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="infomation"> infomation </div> <div id="main"> main <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br><br><br><br><br> </div> <div class="clear">clear</div> <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br> </div> <div class="clear">clear</div> </div> <div id="footer">footer</div> </body> </html> 他にもいろいろ疑問点があり、「margin-left」ではなく「float:left」を２つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか？ 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
- 締切済み
- HTML
- CSS floatによるレイアウト
box_mを縦に並べて、box_mの中にbox_1（左）とbox_2（右）を作りました。 CSS .box_m { width: 410px; margin: 0px 0px 20px 0px; } .box_1 { float: left; width: 200px; height: 100px; } .box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; } HTML <div class="box_m"> <div class="box_1"> ボックス１ </div> <div class="box_2"> ボックス２ </div> </div> <div class="box_m"> <div class="box_1"> ボックス１ </div> <div class="box_2"> ボックス２ </div> </div> IEでは意図したとおりに表示されましたが、Firefoxではbox_mの下のmargin20pxが反映されず、box_m同士がくっついています。 box_m同士の間に20pxの空間を作るにはどうしたらいいですか？
- ベストアンサー
- 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
- ボーダースタイルがうまく表示できない
#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
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { 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:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
- インラインフレームを使用するとIE6でレイアウトが崩れます。
インラインフレームを使用するとIE6でレイアウトが崩れます。 2カラム、左メニューのwebページを作っているのですが、 インラインフレームを使用したページのみ、IE6でレイアウト崩れがおこります。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #box { width:800px; } #main { width: 605px; margin: 5px; float: right; } #menu { width:180px; margin: 5px; float: left; } iframe.member { width: 595px; height: 700px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> ・ ・ ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <iframe src="***.html" frameborder="0" class="member"></iframe> </div> <div id="menu"> メニュー </div> <!-- #boxここまで --></div> ・ ・ ・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ boxのなかにmain（右回り込み）とmenu（左回り込み）で２カラムにしています。 mainのなかに、mainの幅と同等となるインラインフレームを配置したいのですが 上記のようにするとmenuが回り込まず、mainの左下に表示されます。 iframe.memberを使用せず、ほぼ同等のdiv（下記#contents）を切り テキストのページをつくった場合はきれいに回り込みます。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #contents { padding: 15px; width: 565px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> ・ ・ ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <div id="contents"> テキスト テキスト </div> <div id="menu"> メニュー </div> ・ ・ ・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 一度インラインフレームを設置したページからインラインフレームを削除しても divの幅をせばめてみるなどのテストをしても カラム落ち？は直らないという謎の状況です・・・ 他のサイトを同じようなCSSで作ったときには、 インラインフレームを使用してもIE6で問題なく表示されたので 今回のエラー？ バグ？ がなぜおこっているのか見当もつきません。 状況を上手く説明出来てないかもしれませんが、 アドバイス等ありましたらお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSでページ作成、Firefoxでうまく表示できません
ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 なるほど、左・中央・右のコンテンツを先に作るのですね。 お尋ねしたいのですが、スタイルシートのfloatはどういう働きをするのでしょうか？ floatは指定した要素を左や右に配置する働きをしますよね？ そうすると今回の場合left-contentsとcenter-contentsとright-contentsにfloat:leftを指定した場合、どいうことが起こっているのでしょうか？ 今頭の中がぐちゃぐちゃになってます・・・。 このfloatは私が希望するレイアウトには必要なのでしょうか？