ポップアップメニューをセンターレイアウトで表示するには…

[新着] Webテンプレートを仮オープンしました

0   名前： please-a ： 2007/06/26（火） 02:43  ID:UblrWQWq sub-1G
現在作成中のHPで、ポップアップメニュー（カーソルがメニューリンクボタンに入ると、更に下へとメニューが表示される）を使用しているのですが、HP全体のレイアウトをセンター表示としている為（Yahooさんのように）、ぶら下がっているメニューを『visibility:hidden;position:absolute;top:124px;left:117px;』という具合に、全画面表示に対する絶対的な位置指定をしてしまうと、ブラウザの表示サイズを縮小表示をした場合、pxの位置指定の座標がおかしくなり、ぶら下がっているメニューの表示位置がおかしくなる、という現象に悩んでいるのですが、この場合どのようにソースを書けばセンター表示でブラウザのサイズを変更しても、きっちりと親メニューの下にぶら下がっているメニューが表示されるようになるのでしょうか？
色々と他サイトも検索し、検証したのですが、どうにも私の力量では理解しがたく、皆様のお知恵を拝借できないかとこちらへと書き込みさせて頂きました。
虫のいいお願いというは重々承知ですが、どうぞ宜しくお願い致します。

///<HEAD>内のスクリプト///
<script Language="JavaScript">
<!--

var flag = Array();
timerID = 0;

function PopupMenu(MenuId) {
PopupHide();
Obj = document.all("Float" + MenuId);
clearTimeout(timerID);
Obj.style.visibility = "visible";
flag[MenuId] = true;
}

function PopupTurn(MenuId){
if (flag[MenuId]){
Obj.style.visibility = "hidden";
flag[MenuId] = false;
}
else {
PopupHide();
Obj = document.all("Float" + MenuId);
Obj.style.visibility = "visible";
flag[MenuId] = true;
}
}

function PopupHide(){
for (i = 1;i <= 13;i++){
Obj = document.all("Float" + i);
Obj.style.visibility = "hidden";
flag[i] = false;
}
}

-->
</script>
///<HEAD>内スクリプトここまで///

///メニューの親ボタンのソースです///
<table border="0" cellpadding="0" cellspacing="0" height="40" align="left" width="770">
<tr>
<TD width="154"><a href="javascript:PopupTurn(1)"><img src="images/top-menu_01.gif" width="154" height="40" border="0" onmouseover="PopupMenu(1);" onmouseout="timerID=setTimeout('PopupHide()',500);" style="cursor:hand"></a></TD>
</tr>
</table>
///親ボタンソースここまで///

///ぶら下がりボタンのソースです///
<!--float1 button-->
<span ID="Float1" class=Form1 style="visibility:hidden;position:absolute;top:124px;left:117px;">
<TABLE border="0" cellpadding="0" cellspacing="0" onmouseover="clearTimeout(timerID);" onmouseout="timerID=setTimeout('PopupHide()',500);">
<TR>
<TD align="center"><A href="***.html"><img src="images/java_s/menu-off-01.gif"onmouseover="this.src='images/java_s/menu-on-01.gif'" onmouseout="this.src='images/java_s/menu-off-01.gif'" border=0></a><BR><A href="***.html"><img src="images/java_s/menu-off-02.gif"onmouseover="this.src='images/java_s/menu-on-02.gif'" onmouseout="this.src='images/java_s/menu-off-02.gif'" border=0></a></td>
</tr>
</table>
</span>
<!--float1 button-->
///ぶら下がりボタンのソースここまで///


長々しく申し訳ありませんが、どうぞ宜しくお願い致します。
1   名前： 元帥 ： 2007/06/26（火） 02:43  ［URL］  ID:Giuz7f2N sub-bK
親要素を基準とした絶対的な位置指定ではどうでしょうか。
つまり、ぶら下がりボタンのソースを、メニューの親ボタンのソース内のtd要素の子要素とします。

>>0
document.allはIE専用です。
もしかしたらIE以外にも動作するブラウザがあるかもしれませんが、閲覧者の環境は様々である事を考慮してWebを構築なさるとよいでしょう。
HTML文法チェック：
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html


一覧へ戻る