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

解決済みの質問

Web表示がずれます(Dreamweaver MX2004)

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

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

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

投稿日時 - 2005-12-01 10:37:41

QNo.1812627

すぐに回答ほしいです

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

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

投稿日時 - 2005-12-02 21:04:57

お礼

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

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

投稿日時 - 2005-12-05 10:30:30

ANo.3

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

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

回答(3)

ANo.2

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

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

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

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

投稿日時 - 2005-12-01 21:42:09

お礼

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

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

投稿日時 - 2005-12-05 10:28:29

ANo.1

具体的なソース(実際のソースでなく構造が判る程度の具体的な例)が無いと回答しづらいのですが、サイトの基本的なレイアウトは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などの表示部分を選択し、コードビューモードで切り替えると、その問題部分のコードが確認できます。
その部分をコピーアンドペーストなどして、公開しても問題のない範囲で教えていただければ、もっと適切な回答ができると思います。

投稿日時 - 2005-12-01 21:23:54

お礼

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

投稿日時 - 2005-12-05 10:20:14

あなたにオススメの質問