【最大10000ポイント】当たる!!質問投稿キャンペーン!

テーブル内に隙間が。
質問です。CSSとテーブルタグを使用してwebページを作りました。が、
IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。
これを無くすにはどうすればいいのでしょうか。
(html/cssの書き直さなくてはならない箇所はどこでしょうか)

高さは左右のセルとも300に合わせているのですが…。
どなたかご教授願います。


<!--ソース -->
<style TYPE="text/css">
<!--
td {
margin: 0;
padding: 0px;
}
.content_title {
display: block;
position: relative;
padding-left: 0px;
width: 100%;
height: 40px;
color: #ffffff;
background-color: #000000;}

.content_cell {
position: relative;
padding-bottom: 0px;
width: 100%;
height: 260px;
padding: 0;
}
.menu_link {
display: block;
position: relative;
width: 100%;
height: 30px;
padding-top: 12px;
text-align: center;
font-size: 11pt;
color: #f5f5f5;
background-color: #000000;
}
-->
</style>
<table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300">
<td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top">
<div class="content_title">あいうえお</div>
<div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div>
</td>
<td width="28%" height="30" align="center" bgcolor="#000000">
<a class="menu_link" href="../about/index.html">cell_1</a>
</td>
<tr><td width="28%" height="30" align="center" bgcolor="#000000">
<a class="menu_link" href="../flash/index.html">cell_2</a>
</td></tr>
<tr><td width="28%" height="30" align="center" bgcolor="#000000">
<a class="menu_link" href="../web/index.html">cell3</a>
</td></tr>
<tr><td width="28%" height="30" align="center" bgcolor="#000000">
<a class="menu_link" href="../diy/index.html">cell_4</a>
</td></tr>
<tr><td width="28%" height="30" align="center" bgcolor="#000000">
<a class="menu_link" href="../link/index.html">cell_5</a>
</td></tr>
<tr><td width="28%" align="center" height="150" bgcolor="#000000">
<!-- no contents -->no content
</td></tr>
</table>

「テーブル内に隙間が。」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (3件)

>何を思ったか「tableならそれを解消できるのでは」と


>理由もなく閃きました。何でそんな事を考えたのか…。
サイズなどから携帯電話やPDA、さらには読み上げブラウザも想定されているなら、HTMLは下記の様なものになるでしょう。
 CSSのデザインは、簡単ですから・・先のサイズを紹介してください。
<body>
<div>
<h1>あいうえお</h1>
<p><object data="[URL]" type="application/x-shockwave-flash" width="[横サイズ]" height="[縦サイズ]">
<param name="bgcolor" value="[ColorName|ColorCode]">
<param name="loop" value="on|off">
<param name="quality" value="high|medium|low">
<object data="[mpegURL]" type="application/mpeg">
<object data="[GIF-URL]" type="image/gif">
なんとかの写真
</object>
</oblect>
</object>
</p>
<ul class="nav">
<li><a href="../about/index.html">cell_1</a></li>
<li><a href="../flash/index.html">cell_2</a></li>
<li><a href="../web/index.html">cell3</a></li>
<li><a href="../diy/index.html">cell_4</a></li>
<li><a href="../link/index.html">cell_5</a></li>
</ul>
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

自分のような阿呆にアドバイスを…ありがとうございます。

その後解決いたしました。
原因は,恐らく,テーブルを指定する際,ブロック要素
として扱うために右側のメニューのブロックが邪魔をして
左側のブロックと,ずれが生じてしまったようです。

解決方法としてtableタグは使用せず全てCSSのブロック要素で配置
しました。左側のメニューブロックは上記の回答にあるように
リストを用いる事てCSS解除時(携帯電話のブラウザや音声〃)
でも奇麗に表示されました。
(このようにしたかったから最初はtableタグを使った訳です)



そもそも要素の配置の仕方,階層構造,レイヤーの概念が
あやふやだったことが今回の大きな原因でした。
ご回答してくださった皆さん,
ありがとうございました。

お礼日時:2010/04/06 01:10

せっかくCSSを使うのに、なぜtableでデザインされるですか?


ところで、高さを300px;幅を92%でデザインされていますが、ウィンドウ幅はどの程度を想定されているのでしょうか?
幅が、1028pxのディスプレイだと、946px幅となって高さが300pxで添付画像のようにはなりません。
Q:画像の実寸は??(W :   px)(h :   px)
Q:表示幅は
 最小何ピクセル(   px)
 普段画面の(   %)
 最大(    px)
Q:メニューは左の高さを5等分したものでよいのか?
    • good
    • 0
この回答へのお礼

回答ありがとうございます!

>Q:画像の実寸は??(W :   px)(h :   px)
画像についてですが、これは説明しやすくする為に用いた
だけで実際には、サイズ可変のobject(swf)が配置されます。
説明不足でした。すみません。

>せっかくCSSを使うのに、なぜtableでデザインされるですか?
確かに自分でも何がしたいのやら。最初はCSSに頼って
コテコテのデザインにしようかと思ったのですが、音声ブラウザで
読み上げたら、まぁ、酷いことになりました。
そこで、何を思ったか「tableならそれを解消できるのでは」と
理由もなく閃きました。何でそんな事を考えたのか…。

一からCSSでデザインし直してみます。

お礼日時:2010/04/03 11:02

</style>


<table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300">

上の「cellspacing="2"」→「cellspacing="0"」に。
    • good
    • 0
この回答へのお礼

参考になります。
ありがとうございました!

お礼日時:2010/04/06 00:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング