- ベストアンサー
テーブルを挿入すると他のCSSと干渉してレイアウトが崩れてしまいます。
いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。 文字量の関係でテーブルだけ記入しました。 <HTML> <HEAD> <STYLE type="text/css"> <!-- /*テーブル*/ table {position:absolute; left:200px; top:450px; font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:center; border-collapse:collapse } caption { font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:left; } table,th,td {border:1px solid} div {margin:20px} --> </style> </head> <body> <div> <table> <caption>ジャズシューズサイズ表</caption> <tr><th width=70px>Sansha</th><td width=30px>2</td><td width=30px>3</td><td width=30px>4</td><td width=30px>5</td><td width=30px>6</td> <td width=30px>7</td><td width=30px>8</td><td width=30px>9</td><td width=30px>10</td><td width=30px>11</td> <td width=30px>12</td><td width=30px>13</td><td width=30px>14</td><td width=30px>15</td> </tr> <tr><th>(cm)</th><td>21</td><td>21.5</td><td>22</td><td>22.5</td><td>23</td><td>23.5</td><td>24</td> <td>24.5</td><td>25</td><td>25.5</td><td>26</td><td>26.5</td><td>27</td><td>27.5</td> </tr> </table> </div> </body>
- maverick2002
- お礼率56% (9/16)
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
空いている右下（left:200px top:450px）にテーブルをおきたくて、そのように書いてあるのに、他と重なってしまうっていう状況が今ひとつわからないのですが、ポジションで指定した位置に表示されないってことなんでしょうか？ 少なくとも、質問文のHTMLだけだと、ちゃんと指定した位置（left:200px; top:450px;）に表示されているので、どういった状況なのかもう少し詳しくわからないと、皆さん答えようがないと思いますよ。 たとえば、テーブル挿入前はいいけど、テーブルを挿入するとレイアウトが崩れるというのも、挿入したテーブルがメニューや画像とかぶってしまうのか、他のもの全てがあらぬレイアウトになってしまうのか。とか、単純にleft:200px top:450pxの位置に入らないだけなのかとか、他の要素の位置指定もスタイルシートで行っているのかとか。 もしも、すべてのものをポジションでコントロールしているのなら、スタイルシートだけでもココに乗せてもらえれば、解決の糸口は見つかるかもしれませんね。(その際には、それぞれのものの縦横のサイズもわかったほうがいいと思いますが) とにかく、何かしら情報がもう少しわかればといった感じでしょうか。
その他の回答 (2)
- antai
- ベストアンサー率38% (88/227)
すべてがわからないのと、私の力量不足も手伝って、なかなか原因となりそうなのはわかりませんが、とりあえず、ココにあるだけの情報でいくと、 質問文の中にある div {margin:20px} のせいで、全体的にレイアウトおかしくなってるのはあると思いますが、さすがにこれはここへの書き込みの都合でって感じでしょうね。 あと、私が思いつくのはpositionの“親子”関係的なものでしょうか。 親にあたるものに、static以外で位置指定がされていると、位置指定の基点が、ページの左上じゃなくなるのでそのせいで、指定した位置どおりに表示されなくなってたりってこともあるのかなぁって事くらいですね。 たとえば、 <html> <head> <style type="text/css"> <!-- .ichi { position:absolute;left:100px;top:100px;} --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <div class="ichi"> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center">親</div> </td> </tr> </table> <div class="ichi"> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center">子</div> </td> </tr> </table> </div> </div> <div class="ichi"> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center"><font color="#99CC66">重なって見難いけど…</font></div> </td> </tr> </table> </div> </body> </html> こんな感じで、3つのテーブルには同じスタイルシートを適用しているけど、親テーブルのdivタグ内にある子テーブルは親テーブルの左上から右に100px、下に100pxの位置に表示され、もう一つのテーブルは重なって見難いですが、親テーブルと同じ位置に表示されています。 これのせいで、追加したテーブルだけが何かの外にあるor何かの中に入ってしまっているせいで、位置がおかしくなってしまっているのかもしれませんね。 あまり的を射てなさげな回答でスイマセン。 どっちか、もしくは両方で何とかなるといいですが。 また何かありましたら、わかる範囲でお手伝いできればと思います。
- flowermaze
- ベストアンサー率56% (159/282)
＞table {position:absolute; left:200px; top:450px; ここで、テーブルを左から200ピクセル、上から450ピクセルの位置に表示するように指定していますが、これは必要な指定でしょうか？ この位置指定がほかの画像などとテーブルが重なってしまう要因ではないかと思います。 position:absolute; left:200px; top:450px; を削除してみてください。
補足
ありがとうございます。しかしながら 削除しましたが、定位置の左上に表示され ＣＳＳで作成したメニューバーやタイトル が崩れてしまいました。 レイアウト的にテーブルを入れる場所が空い ているのが右下なのでleft:200px; top:450px; の座標に置きたいのです。。。。
補足
お返事遅くなりまして申し訳ありません。ご丁寧にありがとうございます。文字数オーバーでかけなかったのですが例えば下記ＣＳＳ（一部）と組み合わせるとあらぬレイアウトになってしまいます。全てのものをスタイルシートでコントロールしているからなのかクラスの設定が違うのか？？という状況です。 <HTML> <style type="text/css"> <!-- .title{ position:absolute; left:152px; top:28px; width:700px; } .title div{ float:left } .title a { background-COLOR:#969696; display:block; width:90px; border:none; padding:4px; TEXT-ALIGN: center; TEXT-DECORATION: none; font-size:10px; COLOR: #ffffff; FONT-FAMILY: MS,UI,Gothic,標準; } .title A:hover { background-COLOR:#000000; COLOR:#ffffff; } --> </style> <div class="title"> <DIV> <A href="page11.htm">ＨＯＭＥ</A> </DIV> <DIV> <A href="page02.htm">WHAT'S SASHA</A> </DIV> <DIV> <A href="page03.htm">ＡＢＯＵＴ ＵＳ</A> </DIV> <DIV> <A href="page04.htm">ＣＯＮＴＡＣＴ</A> </DIV> <DIV> <A href="page05.htm">ご利用方法</A> </DIV> </DIV> </BODY> </HTML>