- ベストアンサー
divをつかった2段組について教えてください。
すみませんが、思うように段組ができないので、教えてください。 divを使って、次のようなレイアウトを実現させようとしています。 「メインとサブからなる2段組で、メインは幅400px以上、サブは幅200px固定、スクリーンにあわせてメインは大きくなる」(このサイトのようなレイアウトです。) メインを固定でならできるのですが、スクリーンの大きさに合わせる方法が分かりません。 たたき台のコードを添付します。どこを直せばよいのか、教えていただけると幸いです。 -------------------------------------------html------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="/style.css" type="text/css"> </head> <body> <div id="header"> ヘッダ </div> <div id="box"> <div id="boxMain"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> <div id="boxSub"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> </div> <div id="footer"> フッタ </div> </body> </html> ------------------------------css-------------------- div#header { width: 600px; } div#box { } div#boxMain { float: left; margin: 0px; } div#boxSub { width: 200px; float: right; } div#footer { clear: both; width: 100%; }
- xyz_1990
- お礼率66% (127/191)
- HTML
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
連続投稿失礼します。 ちょっと下のはHTMLがおかしいので修正。以下正しいHTML。 <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>段組テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <link rel="stylesheet" href="./style.css" type="text/css" /> </head> <body> <div id="container"> <div id="box"> <div id="header">ヘッダ</div> <div id="boxMain"> <div id="boxMainContent"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> </div> <div id="boxSub"> うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="footer">フッタ</div> </div> </div> </body> </html>
その他の回答 (5)
- Rusica
- ベストアンサー率62% (10/16)
あ、なるほど。ちょっと質問の意図をこちらが理解しきれていなかった ようです。ごめんなさい。 これでいかがでしょうか？ 以下HTML。前回のものと比べるとdivの入れ子が深くなってます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <head> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div id="container"> <div id="box"> <div id="header">ヘッダ</div> <div id="boxMain"> <div id="boxMainContent"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> </div> <div id="boxSub"> うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="footer">フッタ</div> </div> </div> </body> </html> 以下CSS。 *{ margin:0; padding:0; } div#container{ position:relative; width:100%; min-width:600px; } * html #container { border-right: 600px solid #dddddd; } * html #box { float:left; display:inline-block; position:relative; margin-right:-600px; } div#header { width:auto; background-color:#00C0C0 } div#boxMain { width:100%; float: left; background-color:#c0c0c0; margin-right:-200px; } div#boxMainContent{ margin-right:200px; } div#boxSub { width:200px; float:left; background-color:#C0C000; } div#footer { width:100%; clear:left; background-color:#C00000; } これで多分平気なはず。背景色は分かりやすいようにつけただけなので、 適当に消してしまって構いません。 個人的にはdivが入れ子になりすぎていて、こういうHTMLは好きじゃない です。しかもCSSハック使ってますし。まぁIE6ではCSSプロパティのmin- widthに対応していないので仕方ないですね。IEを無視すればもっと シンプルになります。
- vistachio
- ベストアンサー率57% (4/7)
これでどう？ boxSubとboxMainの間に10px間が開くけど div#box { width:100%; float:left; } div#boxMain { width:100%; margin-right:210px; } div#boxSub { float:left; width:200px; margin-left:-200px; }
お礼
ご回答ありがとうございます。 が、ページが崩れてしまいました。
- Rusica
- ベストアンサー率62% (10/16)
もとのHTMLを極力生かすためにちょっとトリッキーなやり方してます。 HTMLは若干変わってます。 ○HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div id="box"> <div id="header">ヘッダ</div> <div id="boxMain"> <div id="boxMainContent"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> </div> <div id="boxSub"> うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="footer"> フッタ </div> </div> </body> </html> ○CSS div#box{ width:100%; } div#header { width:auto; background-color:#00C0C0 } div#boxMain { width:100%; float: left; margin-right:-200px; } div#boxMainContent{ margin-right:200px; } div#boxSub { width:200px; float:left; } div#footer { width:100%; clear:left; } boxMainにする予定だった背景の指定なんかはboxMainContentにして下さい。 ご希望に添えてなかったらゴメンナサイ。
お礼
ご回答ありがとうございます。 試してみましたが、ウインドウを小さくしていくと、やはりメインの幅が400pxよりも小さくなってしまいます。 (FFではメインがサブの下に下がる症状はなくなりました） いろいろ検索してみたのですが、段組を説明しているサイトのサンプルでは、やはり、メインの幅400px以上を満たすものは見つかりませんでした。 また、このサイト http://q.hatena.ne.jp/1163809756 のソースをみたところ、divを使って実現させているようです。 あと、「極力元のhtmlを活かすめ」とのことですが、 全く新規で結構ですので、実現方法が分かれば教えてください。
boxMainにmargin-right:200pxを入れてboxMainに400px幅の透明又は背景と同色の画像を仕込むか見だしが有るなら見出しを400pxにしたらいかがでしょうか。 <div id="box"> <div id="boxSub" style="width:200px;float:right"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="boxMain" style="margin-right:200px;"> <img src="./minwidth.gif" width="400" height="1" alt="minwidth"> <h1 style="width:400px">見だし</h1> <p> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </p> </div> </div> <div id="footer"> フッタ </div> </body>
お礼
ご回答ありがとうございます。 FFでの文字の回りこみはなくなったのですが(1歩前進です。)、 依然、ウインドウの幅を小さくすると、メインが下に落ちてしまいます。 コードは以下の通りです。 <div id="box"> <div id="boxSub"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> <div id="boxMain"> <img src="./minwidth.gif" width="400px" height="10px"> <h1 style="width:400px">見だし</h1> <p> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </p> </div> <div class="clear">a</div> </div> div#box { } div#boxMain { margin: 0px 200px 0px 0px; } div#boxSub { float: right; width: 200px; margin-left: auto; } div.clear { width: 600px; clear: both; }
- motohri
- ベストアンサー率50% (15/30)
こんなときは main 側の float 属性をはずし、 sub を main より前に書けばうまくいきます。 具体的には次のように変更すればＯＫです。 -----htmlの変更箇所----- <div id="box"> <div id="boxSub"> Sub の方を Main より前に書くように修正します。 </div> <div id="boxMain"> 後に Main を書けば隙間に配置されるのを利用しています。 </div> </div> -----cssの変更箇所----- div#boxMain { /* float: left; *//* float ははずしました */ margin: 0px; }
お礼
ご回答ありがとうございます。 早速試してみたところ、ウィンドウの大きさに追従するようになりました！！ が、メインの幅が400px以上という条件が満足できません。 ウィンドウの幅を小さくしていくと、 IEだとメインの幅がどんどん小さくなり、最終的にはサブの下に下がってしまいます。 FFだとさらに、メインの幅が小さくなる際に、あふれた”い”の文字がサブの下に回りこんでいってしまいます。 min-widthとか試してみましたが、うまくいきませんでした。 すみませんが、対象方法をご存知でしたら、お教えください。
関連するQ&A
- <div>でレイアウトすると上下に空白が出る
現在cssを独学で勉強中です。 どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト しようとしています。 下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の 上下に20pxくらいの空欄ができます。 これを出ないようにする方法はありますでしょうか？ というか、記述としては合っているのでしょうか？ 一応いろんなサイトを参考にして記述してはいます。 また、IEとfirefoxでは空欄の出方が違います。 たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると ありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが 今度はSafariでその分要素自体が小さくなってしまいます。 宜しくお願いします。 ---HTML（一応DTDの部分から載せておきます）--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container"> <div id="boxA"> A（ヘッダ） </div> <div id="wrapper"> <div id="boxB"> B（メインカラム） </div> <div id="boxC"> C（サイドバー1） </div> </div> <div id="boxD"> D（サイドバー2） </div> <div id="boxE"> E（フッタ） </div> </div> </body> </html> --- css ----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }
- ベストアンサー
- HTML
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!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=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）
先ほど、質問させて頂きました問題に関しまして、簡単なレイアウトで再度新規にページを作成してみたところ、どうも、PCの縦幅よりも小さい値のページは、下が空いてしまうのではないかという気がしました。 レイアウトの構成は １．上部に「header」コンテナ ２．その下に「wrapper」コンテナ ３．その下（最下部）に「footer」コンテナ という構成で作成したところ、２．の縦幅が300pixのときは、このような現象が起こるが、２．の縦幅が800pixのときは起こりませんでした。 ソースコードは以下の通りです ■ html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper"> id "wrapper" の内容がここに入ります-</div> <div id="footer"> id "footer" の内容がここに入ります</div> </body> </html> ■ CSS部分 body { margin: 0px auto; padding: 0px; } #header { margin: 0px auto; padding: 0px; height: 50px; width: 800px; background: #666666; } #wrapper { margin: 0px auto; padding: 0px; height: 300px; width: 800px; background: #FFFF00; } #footer { margin: 0px auto 5px; padding: 0px; height: 60px; width: 800px; background: #00FFFF; } です。 もし、予想通りPCの縦幅の問題だとしたら、 １．コンテンツの少ないページはどのように対処するのか？ ２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ ３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ をご教授いただけますと幸いで御座います。 月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。
- ベストアンサー
- HTML
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- 補足・修正・訂正あればお願い致します。
windowsのIE9ではきれいに表示することができました。 しかし、横幅やマージン、パディングの箇所の数値がいまいち 理解できていないため完璧にできたという実感がありません。 もっと論理的にきれいな値をプログラムできると思っています。 私のプログラムで補足・修正・訂正あればお願い致します。 ＊＊＊＊＊＊＊＊＊＊＊＊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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <div class="products"> 商品1 </div> <div class="products"> 商品2 </div> <div class="products"> 商品3 </div> <div class="products"> 商品4 </div> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ******************base.css***************************** /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ float:left; width:840px; height:380px; margin:10px; padding-left:0; background:#690; } *html #main{ width:560px; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ float:left; width:130px; margin-left:10px; margin:10px 0px 10px 10px; height:170px; background:#F3F59C }
- 締切済み
- CSS
- safariで見るとページ上部に余白ができてしまう
以下のhtmlとcssをChromeで見るとページ（サイト）上部に余白がないのですが、Safariで見ると余白ができてしまいます。どうやったら上部（と下部）の余白がどのブラウザでも表示されないようになりますでしょうか？初歩的な質問で申し訳ありませんがネットで検索してもわからなかったので、宜しくお願いいたします。 [html] <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> <title></title> </head> <body> <div id="wrap"> <div id="inner"> <div id="header"> <img src="image_basic/logo.png" width="450" height="140" alt="veggietimeslogo" /> <img src="image_basic/slide.jpg" width="920" height="450" alt="slide2" /> </div><!-- /header --> <div id="mainwrap"> <div id="firstwrap"> <p>ここは一段目<br />ここは一段目<br />ここは一段目</p> </div><!-- /firstwrap --> <div id="middlewrap"> <p>ここは二段目<br />ここは二段目<br />ここは二段目</p> </div><!-- /middlewrap --> <div class="clear"><hr /> </div><!-- /clear --> </div><!-- /mainwrap --> <div id="sidewrap"> <p>ここはサイドバー<br />ここはサイドバー<br />ここはサイドバー</p> </div><!-- /sidewrap --> <div class="clear"><hr /> </div><!-- /clear --> <div id="footer"> </div><!-- /footer --> </div><!-- /inner --> </div><!-- /wrap --> </body> </html> [css] @charset "UTF-8"; /* CSS Document */ body{ background-color:#000000; text-align:center; margin:0;} #wrap{ background-color:#ffffff; margin:0 auto; width:960px; text-align:left;} #inner{ margin:0 20px;} #mainwrap{ float:left; width:610px;} #firstwrap{ float:left; width:300px;} #middlewrap{ float:right; width:290px;} #sidewrap{ float:right; width:290px;} .clear{ clear:both;} .clear hr{ display:none;} p { font-family:Tahoma, Geneva, sans-serif}
- 締切済み
- ホームページ作成ソフト
- 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
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 FFでは完璧です！！ IEの方は、なぜかレイアウトが崩れてしまいました。 やはり、min-widthが鬼門みたいです。 いろいろ、自分なりに調べてみたのですが、 http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html の内容が再現できません。私の方がおかしいのでしょうか？ ちなみに、IEのバージョンは6.0.29です。 すみませんが、ご教授の程、よろしくお願いいたします。
補足
自力で解決できました。 大変参考になりました。 ありがとうございます。