みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

テーブルを挿入すると他の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>

投稿日時 - 2004-10-17 18:32:50

QNo.1045775

すぐに回答ほしいです

質問者が選んだベストアンサー

空いている右下(left:200px top:450px)にテーブルをおきたくて、そのように書いてあるのに、他と重なってしまうっていう状況が今ひとつわからないのですが、ポジションで指定した位置に表示されないってことなんでしょうか?
少なくとも、質問文のHTMLだけだと、ちゃんと指定した位置(left:200px; top:450px;)に表示されているので、どういった状況なのかもう少し詳しくわからないと、皆さん答えようがないと思いますよ。
たとえば、テーブル挿入前はいいけど、テーブルを挿入するとレイアウトが崩れるというのも、挿入したテーブルがメニューや画像とかぶってしまうのか、他のもの全てがあらぬレイアウトになってしまうのか。とか、単純にleft:200px top:450pxの位置に入らないだけなのかとか、他の要素の位置指定もスタイルシートで行っているのかとか。
もしも、すべてのものをポジションでコントロールしているのなら、スタイルシートだけでもココに乗せてもらえれば、解決の糸口は見つかるかもしれませんね。(その際には、それぞれのものの縦横のサイズもわかったほうがいいと思いますが)
とにかく、何かしら情報がもう少しわかればといった感じでしょうか。

投稿日時 - 2004-10-20 22:25:42

補足

お返事遅くなりまして申し訳ありません。ご丁寧にありがとうございます。文字数オーバーでかけなかったのですが例えば下記CSS(一部)と組み合わせるとあらぬレイアウトになってしまいます。全てのものをスタイルシートでコントロールしているからなのかクラスの設定が違うのか??という状況です。


<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">HOME</A>
</DIV>
<DIV>
<A href="page02.htm">WHAT'S SASHA</A>
</DIV>
<DIV>
<A href="page03.htm">ABOUT US</A>
</DIV>
<DIV>
<A href="page04.htm">CONTACT</A>
</DIV>
<DIV>
<A href="page05.htm">ご利用方法</A>
</DIV>

</DIV>
</BODY>

</HTML>

投稿日時 - 2004-10-23 18:38:30

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

すべてがわからないのと、私の力量不足も手伝って、なかなか原因となりそうなのはわかりませんが、とりあえず、ココにあるだけの情報でいくと、

質問文の中にある
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何かの中に入ってしまっているせいで、位置がおかしくなってしまっているのかもしれませんね。

あまり的を射てなさげな回答でスイマセン。
どっちか、もしくは両方で何とかなるといいですが。
また何かありましたら、わかる範囲でお手伝いできればと思います。

投稿日時 - 2004-10-23 23:36:58

ANo.1

>table {position:absolute; left:200px; top:450px;

ここで、テーブルを左から200ピクセル、上から450ピクセルの位置に表示するように指定していますが、これは必要な指定でしょうか?
この位置指定がほかの画像などとテーブルが重なってしまう要因ではないかと思います。
position:absolute; left:200px; top:450px; を削除してみてください。

投稿日時 - 2004-10-18 16:45:48

補足

ありがとうございます。しかしながら
削除しましたが、定位置の左上に表示され
CSSで作成したメニューバーやタイトル
が崩れてしまいました。
レイアウト的にテーブルを入れる場所が空い
ているのが右下なのでleft:200px; top:450px;
の座標に置きたいのです。。。。

投稿日時 - 2004-10-18 21:05:21

あなたにオススメの質問