- ベストアンサー
左右に分けたフレームのセンター表示は？
- フレームを左右に分ける一般的な方法ではセンター表示ができないため、別の方法を模索しています。
- 現在はマージン用のフレームを配置することでセンター表示を実現していますが、もっと簡単な方法はあるのか悩んでいます。
- フレームの配置を工夫することでセンター表示を実現する方法についてアドバイスをいただきたいです。
- Jamie_the_hero
- お礼率18% (3/16)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （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>
その他の回答 (3)
- ittochan
- ベストアンサー率64% (2667/4137)
<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近いファイル数なので、やりたくないのですが・笑）
- ittochan
- ベストアンサー率64% (2667/4137)
<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>
お礼
いろいろ検証をしてみました。 Windows、Mac問わずIEにおいては希望通りになりました。 また、NN4.xにおいても<ilayer>を書込むことで、表示自体は希望通りに出来ましたが、 画像とテキストの回り込みでレイアウトが崩れます。 （TDタグに対するline-height指定が原因かとも思いましたが、 どうもそれだけではないようで、まだ解決していません。） また、NN6以降では表示されないと言う状態で手詰まりになっております。 以上、ご報告させていただきます。
補足
早速回答いただきまして、ありがとうございます。 なるほど、その手がありましたね。 <iframe>はNNが対応していないので、全く考えから欠落してました。 <ilayer>と組み合わせて検証してみます。 お礼は結果報告とともに、後日改めてさせていただきます。 ありがとうございました。
- ittochan
- ベストアンサー率64% (2667/4137)
<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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
いろいろとご教授ありがとうございました。 いただいたソースで無事うまく動作いたしました。 ありがとうございました。