プルダウンの位置がwin/macでずれてしまう

質問

日産自動車のサイトのような、
ロールオーバーすると画像が変わり、
下にメニューが出るメニューをつくったのですが、
macでは正常に表示されますがwinで見ると
プルダウンメニューが上の画像の下ではなく、
横位置がずれて表示されてしまいます。
（動作は問題ありません。）

表示位置を指定することは可能でしょうか？
FW4とDW4で制作しています。

どうぞよろしくお願いいたします。

回答No.3

mat-21 · ベストアンサー

補足有り難うございます。
私の場合、レイアウト上のテーブルタグは使わないよう（私の場合、CSSのPOSITION（レイヤー）を使用します）にしているので、回答になるかわかりませんが、横位置がずれるということは、table及びtdの横幅指定が上手くいっていないような気がします。確か？MacのIEでは<td>空（記述なし）</td>でもブラウザ表示はその箇所が空いて表示されますが、Winでは、無い物として表示されたような気がします。特にTDのHEIGHT="XXX"は無視されたような覚えがあります。よって、CSSを使って厳密にサイズ指定されてはいかがでしゅうか？例えば、TDに入る画像の横幅を調べ、
<table border="0" cellpadding="0" cellspacing="0" style="width:500px;" align="center">
<tr>
<td style="width:200px;"><img src="xxx.gif" width="200" height="xxx"></td>
<td style="width:300px;">&nbsp;</td>
</tr>
</table>
上記は左のTDに画像を入れ、右のTDには空のスペース（&nbsp;は空のHTMLタグです。全角スペースでもできますが....）っといった感じで、応用できるかと思います。
もし、上部のマウスが触れる画像の横幅が500pxでセンタリングしている想定です。
CSSでWIDTH指定すれば、TDの中が空でも無視されることなく、指定した幅で表示します。
ちなみに、上記にJavaScript用のID指定は省いています。

お礼

やはりセンタリングされた画像とプルダウンの表示
位置がwinとmacでずれてしまいました。

Macでは問題なく画像もプルダウンメニューも
センタリングされるのですが、
winでは画像をセンタリングすると、
左寄せの位置にプルダウンが出てしまいます。
FMMXではこの問題が簡単に解決できるそうなのですが…。

cssでTDのwidth指定する事、とても参考になりました。
他の仕事でも今後是非活用させて頂きます。

丁寧に教えて頂いて本当にありがとうございました。
教えて頂いたことを参考にもう少し考えてみます。

補足

FWMXでプルダウンの位置ずれは解決しました。
センター寄せレイアウトでJavascriptのプルダウンメニューを作られる方には、FWMXおすすめです。

mat-21さん、どうもありがとうございました。

回答No.2

mat-21

補足ありがとうございます。
すいません。もうちょっとお聞きしたいのですが、この場合のプルダウンメニューとは、画像にマウスが乗ると、下にメニュー画像（文字ですけど）が可視状態で表示され、離れると不可視で見えなくなるってやつですよね。ご質問から察するに、<map><area>は、画像内のリンク指定ですので、そのことではなく、プルダウンメニューの画像の配置タグは、何でしょうか？<div>もしくは<table>？プルダウンの方法はJavaScriptですよね。HTMLのタグに「id="???"」の属性の方法ではないですか？
すいませんm(_ _)m 何度も聞きまして。

補足

プルダウンメニューはお察しの通りの仕様で、
Javascriptを使用してます。

プルダウンを含んだ画像はテーブルで配置しています。

（FWでスライスした画像をテーブルで組んだナビゲーションバーを、テーブルごとセンター寄せしています。）

説明不足で申し訳有りません、よろしくお願い致します。

回答No.1

mat-21

プルダウンの方法は問題なさそうなので省きます。
この場合のプルダウンの位置をCSSのPOSITIONで指定していますでしょうか？
全体のデザインは画面の左寄せでしょうか？
それがわかれば、回答できますので、補足お願いします。
基本的にCSSのPOSITIONを使っての位置指定の問題だと思われます。全体のレイアウトが左寄せの場合、指定も簡単ですが、全体のレイアウトが画面センターだと、ちょっとCSSのテクニックが必要です。

補足

位置はFWで書き出したままなので、HTMLの<map>、<area>タグで指定されています。
（cssでは位置指定しておりません。）

全体のデザインはセンター寄せです。

どうぞよろしくお願いいたします。