Web表示がずれます（Dreamweaver MX2004）

質問

上記作成ソフトを使用しています．
完成したHPをサイトで確認したら
ブラウザのウィンドウ幅を狭めていくと、
(1) ウィンドウサイズにあわせて改行する箇所
(b) そのままの幅の箇所（結果として横スクロールバーが表示される）の2種類の振る舞いが表示されます．

TOP_TITLEはFireworksでページ幅一杯に「どーん」と挿入しているので問題ないのですが，
メニューボタンが一個一個の画像ファイルを使用しているせいか，幅を狭めると横に6個くらい並んでいるボタンが綺麗に縦に羅列します．
TABLEも使用していますが，文章は崩れないのですが，挿入したイメージが崩れます．

原因が良くわかりません．．
詳しい方がいらっしゃったら参考に教えていただけますか？

回答No.3

nogutan · ベストアンサー

みなさんが、書かれているようにソースを見ないとはっきり言えませんが。
テーブルのTH,TR,TDタグの中で％、もしくはなにも書いていないwidthのところがあるのではないでしょうか。
pxで指定されているところは、ウィンドウサイズを変えても小さくならないと。
%や無指定の場合は、ウィンドウサイズに合わせてテーブルのサイズも変わってしまいます。
たぶん上記タグの指定がバラバラなのではないでしょうか。
もしくはテーブルごとに。

お礼

お返事が遅れました．ありがとうございます．
ご回答いただいた皆様のご指摘通り，幅に問題があったようです．（若干その他の部分にもあったのですが）

本当に参考になりました．質問してよかったです．
ありがとうございました．

回答No.2

kagamin

ボタンはTOP_TITLEと一緒に書き出ししたんでしょうか？それとも自分で後で並べたのでしょうか。
一緒に書き出しているなら、ずれないと思うんですけど…うーん。

チェック箇所としては…
ボタンを並べたトータルの横幅よりテーブル（もしくはセル）が狭くなっていないかどうか。とか…

もしボタンのトータル横幅が600ピクセルなら、テーブルもしくはセルの幅が600ピクセル以上で設定されていないとずれますし。
あと、テーブルの幅の指定がされていない場合だとかもずれたと思います。

実際のページを見れば多分分かると思うのですが、質問内容から分かるのは私にはこれぐらいです。すみません.。o○

お礼

お返事が遅れました．ありがとうございます．
>もしボタンのトータル横幅が600ピクセルなら、テーブルもしくはセルの幅が600ピクセル以上で設定されていないとずれますし。

ここら辺でなにやら色々誤差が生じたみたいで．．TABLEの幅ってTOTALを考えてやらないとだめですね..
ありがとうございました．

回答No.1

s_hukami

具体的なソース（実際のソースでなく構造が判る程度の具体的な例）が無いと回答しづらいのですが、サイトの基本的なレイアウトはTABLEでコーディングされているとみてよろしいでしょうか。
TABLE,TDなどの幅は%で指定したり、数値（px単位）で指定したりしていませんか？

また、ナビゲーションは以下のようにTDタグの中に入れているか、否かで表示が変化すると思います。
<table width="680" height="65" border="0" cellspacing="10" cellpadding="0" id="navi">
<tr>
<td width="100"><a href="index.html"><img src="images/navi/top.gif" alt="TOP" width="100" height="18" border="0"></a></td>
<td width="100"><a href="con01.html"><img src="images/navi/con01.gif" alt="CON01" width="100" height="18" border="0"></a></td>
<td width="100"><a href="con02.html"><img src="images/navi/con02.gif" alt="CON02" width="100" height="18" border="0"></a></td>
<td width="100"><a href="con03.html"><img src="images/navi/con03.gif" alt="CON03" width="100" height="18" border="0"></a></td>
<td width="100"><a href="con04.html"><img src="images/navi/con04.gif" alt="CON04" width="100" height="18" border="0"></a></td>
<td width="100"><a href="con05.html"><img src="images/navi/con05.gif" alt="CON05" width="100" height="18" border="0"></a></td>
</tr>
</table>
該当のHTMLファイルを開いてデザインビューモードで該当のTABLEやDIVなどの表示部分を選択し、コードビューモードで切り替えると、その問題部分のコードが確認できます。
その部分をコピーアンドペーストなどして、公開しても問題のない範囲で教えていただければ、もっと適切な回答ができると思います。

お礼

ありがとうございます．返事が遅くなりました．
参考にいただいたログ大変勉強になりました．
お察しする通りです．直りました．．ｗ．
勉強不足で．．頑張ります．