- ベストアンサー
cssレイアウトについて
こんにちは。cssでデザインを作っているのですが、思うようにレイアウトができなくて困っています。 このような ┌─────┐ │ １ │ ├──┬──┤ │ ２│ ３│ └──┴──┘ レイアウトを作ろうとしています。 １の部分には画像、２の部分にはテキスト、３の部分にはtableが入ります。 しかし、３の<table>上の部分が２の<p>分下に下がって表示されてしまいます。 これを２と３の上の部分が揃うようにレイアウトするには、どうすればいいでしょうか？ 分かる方、教えてくださいませ。 よろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
全体を一度divで囲ってみてはいかがでしょう。 <div id="body"> <div id="header"> １番の内容 </div> <div id="contents"> <div id="left"> ２番の内容 </div> <div id="right"> ３番の内容 </div> </div>←#contentsの閉じ </div>←#bodyの閉じ ↑大枠のレイヤーを作ってやって、中にヘッダー、コンテンツ(左、右)を入れ、左にはfloat: left;、右にはfloat: right;。 幅は％よりも絶対指定のpxのほうが崩れません。ウィンドウサイズによって可変にしたいのであれば％指定にしなくてはいけませんが…。 また、崩れる大きな要因として、IEなどではWidthとMargin、Paddingの解釈が特殊です。２カラム、３カラムにする場合は極力幅と余白は一緒に指定しないようにした方が宜しいかと思います。 左右を足しても100％にならないように指定すれば、余った分が余白として表示されます。
その他の回答 (5)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
繰り返します。あなたのソースには、BottomAreaの中でパラグラフ とテーブルの位置関係が何も書いてありません。それで隣に並ぶと 期待するのが間違っています。テーブルのマージンを空けただけ じゃダメです。 左に置きたい物と右に置きたい物を区別して、Absoluteで無理矢理 配置するなりfloatさせるなりして並べましょう。幅を%で指定する とか、pxで指定するとかは、関係ありません。
- partita
- ベストアンサー率29% (125/427)
floatの失敗だと仮定して推測できる解決策を話をします。 【１】 ２や３のwidthを40%、60%としているのなら、37%、56%のように、100%にならないように設定する。 【２】 widthがピクセル指定ならば、幅を狭めてみる、もしくはmargin、paddingをすべてゼロにしてみる。 いずれにせよ、すべてのタグをここに書き込んでもらうのが解決への早道です。あと、動作環境ね。
- NTJ
- ベストアンサー率44% (46/103)
<TABLE border=0> <TR><TD colspan=2> １の部分には画像 </TD></TR> <TR><TD valign=top> ２の部分にはテキスト </TD> <TD valign=top> ３の部分にはtable </TD></TR> </TABLE> これではダメ？
補足
tableにしてしまえば、この問題は手早く確実に解決するのですが、他のWebサイトはレイアウトの崩れがなくちゃんと作れているのを見て、tableにしてしまわずcssで解決できないかなと思い、質問を投稿しました。 でも、cssって難しいですね。。
- orange001
- ベストアンサー率32% (83/253)
こちらの、「幅固定型」の中の「2カラムヘッダー付」をご覧ください。 http://www.stylish-style.com/gallery/gallery-top.html このCSSの応用でできると思います。
補足
orange001さん、ご回答ありがとうございます。 サイト教えていただいてありがとうございました。参考になりました。 しかし、このサイトのソースを参考にしてもまだレイアウトが崩れてしまいます。。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
2と3の位置関係に関する記述が何もないですね。2カラムレイアウト のサンプルは結構アッチコッチにあるはずなので、調べてみるとい いですよ。たとえばこんな感じ。 #header { text-align: center; width: 100%; } #sidemenu { clear: both; float: left; width: 25%; } #contents { position: relative; float: right; right: 0%; width: 73%; }
補足
grumpy_the_dwarfさん、回答ありがとうございます。 %指定ではなく、px指定したいと思っています。 1の部分を730px、2の部分を340px、3の部分を340px（margin-left:365px）とし、3のtableでclear:bothしているのですが、レイアウトが崩れてしまいます。
補足
幅指定を「100%にならないように設定する」ものなのですか！ 今のソースは、 <html> <head> <style type="text/css"> <!-- #horizonLayout { margin:20PX; width:730px; background:#000000; } #horizonLayout h4 { font-size:26px; font-family: Georgia, "Times New Roman", Times, serif; color:#ffffff; border-bottom:1px solid #666666; padding:0; margin:0; padding-bottom:6px; } #horizonLayout .mainImg { display:block; padding:20px 0; margin:20px 0; text-align:center; vertical-align:middle; } #horizonLayout #bottomArea p{ font-size:14px; color:#ffffff; line-height:1.5em; width:340px; margin-right:20px; } #horizonLayout #bottomArea table { width:340px; font-size:12px; border:5px solid #000000; background:#000000; margin-left:365px; clear:both; } #horizonLayout #bottomArea table caption { display:block; padding:10px; background:#000000; text-align:left; color:#FFFFFF; font-weight:bold; border-bottom:1px solid #000000; } #horizonLayout #bottomArea table th{ padding:6px 12px; background:#ffffff; border:1px solid #7D93AD; } #horizonLayout #bottomArea table td{ padding:6px 12px; background:#ffffff; border:1px solid #7D93AD; color:#000000; } --> </style> </head> <body> <div id="horizonLayout"> <h4>page title</h4> <div class="mainImg"> <img src="" width="249" height="345" id="imgMain" /> </div> <div id="bottomArea"> <p>sample text.</p> <table cellspacing="3" cellpadding="0"> <caption>123456</caption> <tr> <th>11111</th> <td>11111</td> </tr> </table> <table cellspacing="3" cellpadding="0"> <caption>123456</caption> <tr> <th>11111</th> <td>11111</td> </tr> </table> </div> </div> </body> </html>