プロが教える店舗&オフィスのセキュリティ対策術

ありがちな左にメニュー、右にコンテンツのフレームを作っていますが、
これをセットでセンターに配置して表示することが出来ず、悩んでいます。

現在はフレームの更に左右にマージン用のフレームを配置することで、
センター表示を実現させていますが、もっと簡単な方法はありませんか?

<frameset cols="*,80,640,*">
<frame src="ダミーファイル" name="left" noresize>
<frame src="メニューファイル" name="menu" noresize>
<frame src="コンテンツファイル" name="body" noresize>
<frame src="ダミーファイル" name="right" noresize>
</frameset>

A 回答 (4件)

<HTML>


<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>ファイトーー!( ゜ロ゜)乂(゜ロ゜ )イッパーーツ!!</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function window_onresize(ev) {
var ifr = document.getElementsByTagName("IFRAME");
var mainMenu = document.getElementById("mainMenu");
document.body.style.marginTop=0;
document.body.style.marginBottom=0;
for(i=0;i<ifr.length;i++){
ifr[i].height = document.body.clientHeight - mainMenu.height -10;;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY LANGUAGE=javascript onresize="return window_onresize()" onload="return window_onresize()">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="720">
<tr>
<td id=mainMenu colspan="2" height=45>
NN7は、表の高さ指定で%は使えないみたいですよ
</td>
</tr>

<tr>
<td valign="top" width="150">
<iframe width="150" src="サブメニュー"></iframe>
</td>

<td valign="top" width="570">
<iframe width="570" src="コンテンツ" name="contents"></iframe>
</td>

</tr>
</table>
</div>
</BODY>
</HTML>
    • good
    • 0
この回答へのお礼

いろいろとご教授ありがとうございました。
いただいたソースで無事うまく動作いたしました。

ありがとうございました。

お礼日時:2002/10/06 15:24

<HTML>


<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=s-jis">
<TITLE>~( ̄∇ ̄~)ふら(~ ̄∇ ̄)~ふら フラダンスゥ</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function window_onresize() {
var ifr = document.getElementsByName("ifr");
for(i=0;i<ifr.length;i++){
ifr[i].style.width = window.document.body.clientWidth/3;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY LANGUAGE=javascript onresize="return window_onresize()" onload="return window_onresize()">
<P>NN7でしたら、これでどうでしょう</P>
<P>NN6でも動くかも</P>
<P align=center>
<IFRAME name=ifr height=500></IFRAME>
<IFRAME name=ifr height=500></IFRAME>
</P>
</BODY>
</HTML>

この回答への補足

度々、ご教授ありがとうございます。
いただいたソースのままだとうまくいくのですが、
自分のページに取り込んでアレンジすると、どうもうまくいきません。

甘えついでに図々しくもソースを書きますので、
お気付きの点がありましたら、指摘いただければ幸いです。

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="720" height="100%">
<tr height="45">
<td height="45" colspan="2">ここにメインメニューを.jsファイルから取り込み</td>
</tr>

<tr height="100%">
<td height="100%" valign="top" width="150">
<iframe width="150" height="100%" src="サブメニュー"></iframe>
</td>

<td height="100%" valign="top" width="570">
<iframe width="570" height="100%" src="コンテンツ" name="contents"></iframe>
</td>

</tr>
</table>
</div>

*幅720×高さ100%のテーブルの上45ピクセルにメインメニューを取り込み、
下のスペースを120と570のフレームで処理しようとしています。

いただいたスクリプトはウィンドウサイズの1/3を"ifr"に与えているようですが、
これを150ピクセルに固定出来ればうまくいきそうな気もしますが、
いただいたソースをそのままテーブルで囲むと高さが0(1?)になってしまい
やはりうまくいきません。

こうなったら力任せにサブメニューもjsファイル化して取り込もうかと
思い始めています。
(100近いファイル数なので、やりたくないのですが・笑)

補足日時:2002/09/29 09:13
    • good
    • 0

<HTML>


<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P>改良しました<BR>
これはどうでしょう
</P>
<TABLE HEIGHT=500 width=400 align=center border=0>
<P align=center>
<IFRAME width="49%" height="500"></IFRAME>
<IFRAME width="49%" height="500"></IFRAME>
</P>
</TABLE>
</BODY>
</HTML>

この回答への補足

早速回答いただきまして、ありがとうございます。

なるほど、その手がありましたね。
<iframe>はNNが対応していないので、全く考えから欠落してました。
<ilayer>と組み合わせて検証してみます。

お礼は結果報告とともに、後日改めてさせていただきます。
ありがとうございました。

補足日時:2002/09/24 03:11
    • good
    • 0
この回答へのお礼

いろいろ検証をしてみました。

Windows、Mac問わずIEにおいては希望通りになりました。
また、NN4.xにおいても<ilayer>を書込むことで、表示自体は希望通りに出来ましたが、
画像とテキストの回り込みでレイアウトが崩れます。
(TDタグに対するline-height指定が原因かとも思いましたが、
どうもそれだけではないようで、まだ解決していません。)

また、NN6以降では表示されないと言う状態で手詰まりになっております。

以上、ご報告させていただきます。

お礼日時:2002/09/26 09:46

<HTML>


<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P>インラインフレームはどうでしょう
<TABLE style="WIDTH: 494px; HEIGHT: 486px" cellSpacing=1 cellPadding=1 width=494
align=center border=0>
<TR>
<TD>
<P align=center>
<IFRAME width="40%" height="100%"></IFRAME>
<IFRAME width="40%" height="100%"></IFRAME>
</P>
</TD>
</TR>
</TABLE>
</P>
<P></P>
</BODY>
</HTML>
    • good
    • 0

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