ありがちな左にメニュー、右にコンテンツのフレームを作っていますが、
これをセットでセンターに配置して表示することが出来ず、悩んでいます。
現在はフレームの更に左右にマージン用のフレームを配置することで、
センター表示を実現させていますが、もっと簡単な方法はありませんか?
<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>
No.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>
No.3
- 回答日時:
<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近いファイル数なので、やりたくないのですが・笑)
No.2
- 回答日時:
<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>と組み合わせて検証してみます。
お礼は結果報告とともに、後日改めてさせていただきます。
ありがとうございました。
いろいろ検証をしてみました。
Windows、Mac問わずIEにおいては希望通りになりました。
また、NN4.xにおいても<ilayer>を書込むことで、表示自体は希望通りに出来ましたが、
画像とテキストの回り込みでレイアウトが崩れます。
(TDタグに対するline-height指定が原因かとも思いましたが、
どうもそれだけではないようで、まだ解決していません。)
また、NN6以降では表示されないと言う状態で手詰まりになっております。
以上、ご報告させていただきます。
No.1
- 回答日時:
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 画像が表示出来ません。 1 2023/02/02 16:30
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP 記述のおかしいところを教えて下さい。 1 2023/02/03 11:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
同じクラス名はつけないほうが...
-
テーブルの一部分のセルだけに...
-
Tableタグで作成した表の縮小
-
formのinputなどの幅100%指定
-
特殊文字の検索方法
-
同じwidth=200でもセル内の文字...
-
Firefoxを使ってるのですがズー...
-
tableがbodyにはみ出る。。
-
Tableタグ内のspan styleが適応...
-
td要素内のdiv要素をセンタリン...
-
divで囲んだ文字が消える
-
Visual Studio で CLR 開発でデ...
-
商品詳細を横並びに表示する方法
-
丸角テーブルの簡単な作り方
-
cssで、テーブルのtdの中の文字...
-
テーブル内のテーブルの高さを...
-
<img>タグにCSSのclass設定可能?
-
td width="180" と固定してるの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
XHTMLに関する質問 順序が逆に...
-
td width="180" と固定してるの...
-
テーブル内のテーブルの高さを...
-
表とリスト(ulとtable)の違い...
-
td要素内のdiv要素をセンタリン...
-
divで囲んだ文字が消える
-
ブラウザによってテーブルのセ...
-
firefoxで「height: 100%;」と...
-
formのinputなどの幅100%指定
-
cssで、テーブルのtdの中の文字...
-
センタリングしたページの印刷
-
vbscriptで時計を作りたい
-
HTMLのテーブルでそれぞれの大...
-
Dreamweaver デザインビューの...
おすすめ情報