フレームを上下に2つで分割して、上下に同じ大きさのテーブルを作ると、上と下を比べると左右にすこしズレが発生します。どのように回避すればよいのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

実際にページを見てないのでわからないのですが、


上下どちらか片方のフレームに縦方向のスクロールバーがないでしょうか?

この状態で、上下同じ幅のテーブルをそれぞれ中央に表示すると、スクロールバーの半分の幅だけズレが発生します

これを回避するにはスクロールバーを両方表示するか、
スクロールバーがないフレームの右部にスクロールバーと同じ幅のダミーフレーム(又はダミーテーブル等)を入れて回避する方法があります。

参考まで
    • good
    • 0

ブラウザのバージョンやフレーム・テーブル共にどのくらいの幅・高さなのか、わからないので何とも言えない部分もありますが。



私が知っている限りでは、テーブルの幅を絶対に固定させるには次の方法があります。

1.nowrap(改行禁止タグ)を入れる。
2.適当なサイズの透過GIFを作って、タグで任意のサイズを指定してテーブルの中に貼り付けてしまう。高さ1ピクセルぐらいなら、それほど目立ちません。
マージンの幅もこれで固定することが可能です。

とりあえずDreamweaverで質問内容と同様の画面を作成し、IE.5.5とNN4.7で確認してみましたがズレはできませんでした。
    • good
    • 0

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

このQ&Aと関連する良く見られている質問

QCSSで画像・テーブルをウインドウの中央(上下・左右共)に表示したい!

前回は文字を一番下の中央に表示させたい質問をして、
回答を頂き出来るようになったのですが、今度は画像や
テーブルをCSSを使ってウインドウの中央(上下・左右共)
に表示させる方法が分らず困っています。
ご存知の方がおられましたら回答を宜しくお願いします。

このようにやってみましたが、画像やテーブルの縦の長さ
に関係なく50%位置に配置されてしまい、上下に中央では
なくなってしまいました。
position:absolute;
top:50%;
width:100%;
text-align:center;

いじょう宜しくお願いします。

Aベストアンサー

垂直位置の指定にvertical-alignというのがあるので、
いろいろと試してみましたが、どうやらtableの中でしか効果を発揮しないようです。

<body style="margin:0;">
<table style="position:absolute;top:0%;left:0%;width:100%;height:100%;">
<tr>
<td style="text-align:center;vertical-align:middle;">
<img src="img.jpg">
</td>
</tr>
</table>

一応、中央には表示されますがbodyでmarginをゼロにしてしまっているために、他の文字などにも影響が出てしまいます。

他に表示するものが無いのであれば、絶対位置指定をやめてbodyの直後にtableを記述すればokだと思いますが・・・

Qフレームで、画面を上下に分割した後…

こんにちは!
工業中学の1年です。
技術の授業でソース(メモ帳)からHP作りをしています!

サンプルとして、↓を見ながら質問を聞いて下さい!
http://www.fureai.or.jp/~irie/html-tag/frame/sample1/index.html

今、これで上と下に分割されてますよね?
それで私は、上の方はメニュー(いくつかアイコンを入れる)にします。
下の方には、上でアイコンを押したとき、下で表示されるようにしたいのです!

今のソースは、こちら↓
<html>
<head>
<title>画面を上下に分割する</title>
</head>
<frameset rows="30%,*">
<frame src="frame1.html" name="frame1"> ←【ここはメニューです】
<frame src="frame2.html" name="frame2"> ←【ここは今は臨時で1つのページに設定しています。】

<body text="#000000"bgcolor="#ffffff">
<center>
<h1>I introduce a<br>
school by club activities</h1> ←【タイトルです】
</center>
</frameset>
</html>

(←【ここに文字】←これは、含んでいません)
これだと、上でアイコンを押した時に、
別窓で開いてしまうんです…。


どなたか分かる方いらっしゃいますか?
分からない説明などありましたら、言ってくれれば
解説します!

こんにちは!
工業中学の1年です。
技術の授業でソース(メモ帳)からHP作りをしています!

サンプルとして、↓を見ながら質問を聞いて下さい!
http://www.fureai.or.jp/~irie/html-tag/frame/sample1/index.html

今、これで上と下に分割されてますよね?
それで私は、上の方はメニュー(いくつかアイコンを入れる)にします。
下の方には、上でアイコンを押したとき、下で表示されるようにしたいのです!

今のソースは、こちら↓
<html>
<head>
<title>画面を上下に分割する</title>
</head>
<fram...続きを読む

Aベストアンサー

問題点とは直接関係無いですが、
<body text="#000000"bgcolor="#ffffff">
<center>
<h1>I introduce a<br>
school by club activities</h1> ←【タイトルです】
</center>
これを下記に修正しましょう。
<noframes>
<body text="#000000"bgcolor="#ffffff">
<center>
<h1>I introduce a<br>
school by club activities</h1> ←【タイトルです】
</center>
</body>
</noframes>

リンクについては、他の方々の回答通りです。
target先には「フレーム名(name="半角英数字")」を指定しましょう。

Qフレームの上下でテーブルの横幅を合わせたい場合

パソコン用ホームページでフレームを使用したページを作成中なのですが、メニューを上フレームに横並びにして記述したので、それと同じ幅のテーブルを下フレームにも作りたいのです。
しかし!ブラウザが違うと横幅が違ってしまうので困っています。
下にタグを記述します。
なんでもいいのでアドバイスをお願い致します。

<html>
<head>
<title>テスト</title>
</head>
<body>
<div align="center">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<th valign="top" class="td1" align="left">
あああ
</th>
<td width="200">
ううう
</td>
</tr>
<tr>
<td>
<textarea rows="15" cols="70">いいい</textarea>
</td>
<td valign="top" class="td1">
えええ
</td>
</tr>
</tbody>
</table>
<br>
</div>
</body>
</html>

パソコン用ホームページでフレームを使用したページを作成中なのですが、メニューを上フレームに横並びにして記述したので、それと同じ幅のテーブルを下フレームにも作りたいのです。
しかし!ブラウザが違うと横幅が違ってしまうので困っています。
下にタグを記述します。
なんでもいいのでアドバイスをお願い致します。

<html>
<head>
<title>テスト</title>
</head>
<body>
<div align="center">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<th valign="top" class="td1" align="l...続きを読む

Aベストアンサー

テーブルの幅を調整する場合、いろいろな条件により微妙に変わってしまうので、
その場に応じて設定を変える必要がありそうです。

今回はまず、<table>タグにwidthとstyle属性を入れてみてください。
   width="700"
   style="table-layout: fixed;"
これらは必要に応じて付けたりはずしたりしてください。
テーブル全体のwidth属性は、ややゆとりを持たしたほうが良いようです。
また、内容が文字だけの場合と<textbox>を含む場合とは違いが出てきます。

とりあえず、以下の様に変更してみてください。
-------------------------------------------------------------------
<table cellspacing="1" cellpadding="0" width="700" style="table-layout: fixed;">
-------------------------------------------------------------------


詳しくは、以下のページも参考にしてみてください。
文字の場合
http://cvs.sourceforge.jp/cgi-bin/viewcvs.cgi/kagetaka/package/sample/html/table/Attic/width_cell.html?rev=1.2

CSSによるページレイアウトの考察
http://www.kiwi-us.com/~mizusawa/penguin/html_hint/css_tips/page_const.html

テーブルの幅を調整する場合、いろいろな条件により微妙に変わってしまうので、
その場に応じて設定を変える必要がありそうです。

今回はまず、<table>タグにwidthとstyle属性を入れてみてください。
   width="700"
   style="table-layout: fixed;"
これらは必要に応じて付けたりはずしたりしてください。
テーブル全体のwidth属性は、ややゆとりを持たしたほうが良いようです。
また、内容が文字だけの場合と<textbox>を含む場合とは違いが出てきます。

とりあえず、以下の様に変更してみて...続きを読む

Q上下に分割したフレーム内の表を中央に揃えたい

こんにちは。
今、ホームページ作成中で、つまづいています。
やりたいことはEXCELデータベースのように見出しを
固定して、レコード部分のみをスクロールできるようにしたいと思っています。
htmlでこれを実現する為に
上下にフレームを分割して上ページに見出し、下ページに
レコードを表示させようと、表を作成しました。
この表がうまくいかず、左寄せだと上下がきれいに揃うのですが、
中央に位置を移動すると微妙にずれてしまいます。
どうしても中央に表をもってきたいのですが、
何が原因でずれるのかがわかりません。
環境はOS:98/XP、IE6です。
下ページのトップマージン0、フレームの境界線0に
しています。原因をご存知の方、どなたか教えてください。
よろしくお願いします。

Aベストアンサー

m_fさん、こんにちは。

「左寄せにすると、左右がきちんとあうのに、中央寄せにすると、微妙にずれる…」

質問内容から察するにタグの間違いではないようです。(絶対とはいえませんが)
理由は、中央寄せにした場合、下のフレームの右端に「スクロールバー」が出ていませんか? この分がずれを生んでいるのです。

上フレームのテーブル幅と下フレームのテーブル幅が同じに作成しているとき、

A.左寄せの場合では、下フレームの右端にスクロールバーが出ても、右端から、テーブル幅分の長さで表示されるので、ずれはおこりません。

B.左寄せの場合でも下フレームにスクロールが出ない位の短いページでは、下フレームの右端にスクロールバーが出ても、ページ幅が上と下では同じなので、ずれはおこりません。

C.左寄せの場合でも下フレームにスクロールが出る位の長いページでは、下フレームの右端にスクロールバーが出ると、ページ幅が上と下では同じではないので(上フレームのページ幅より、下フレームのページ幅の方がスクロールの10ピクセル位かな?ページ幅が短くなるので)、ほんのすこしのずれがおこります。

意味わかりますか?

これは仕方のないことです。防ぎようがありません。大手のサイトでもフレームを分けてると、こういうことが多々あります。気にしないことが良いと思います。
気になるのであれば、上フレームの方の幅や右マージンを少し変更して(スクロール分を)そろえるとかしても良いのでは。(でも、らうざによって多少違うので、正確には直せません)でも、あまり、そこまでしないと思いますよ、普通は。

m_fさん、こんにちは。

「左寄せにすると、左右がきちんとあうのに、中央寄せにすると、微妙にずれる…」

質問内容から察するにタグの間違いではないようです。(絶対とはいえませんが)
理由は、中央寄せにした場合、下のフレームの右端に「スクロールバー」が出ていませんか? この分がずれを生んでいるのです。

上フレームのテーブル幅と下フレームのテーブル幅が同じに作成しているとき、

A.左寄せの場合では、下フレームの右端にスクロールバーが出ても、右端から、テーブル幅分の長さで表示...続きを読む

Qフレーム分割したウインドの中にフレーム

約2:8のメニュー用フレームの、
割合8のウインドへ、左右両方に別々のイメージが入るようにしたいので、フレームで作ったソースを表示させたいのですが、良い記述が分かりません。

そもそもフレームってウインドを分割する機能なので、
こういうテーブルみたいな記述は出来ないのでしょうか?

もし出来ないのなら、他に良い記述方法を教えて下さい!

Aベストアンサー

フレームを入れ子にすればどうでしょう?

------------------------------------
一層目
------------------------------------
外側のフレーム(frame_out.html)
左フレーム(20%の方) :ターゲット名をAとする
 読み込みファイル名をA.htmlとする。
右フレーム(80%の方) :ターゲット名をBとする
 読み込みファイル名をB.htmlとする。
------------------------------------
二層目
------------------------------------
内側のフレーム(frame_in.html)
左側のフレーム(任意の幅):ターゲット名B-1とする
右側のフレーム(任意の幅):ターゲット名B-2とする
------------------------------------

初期状態では、左枠にA.html 右枠にB.htmlが表示される状態で、

A.htmlでのリンクで、
ターゲットBに対してframe_in.htmlを呼び出す。
<a href="frame_in.html" target="B">

すると、ターゲットBの中に、フレーム分割が読み込まれる…。


こんなのでどうでしょう。

フレームを入れ子にすればどうでしょう?

------------------------------------
一層目
------------------------------------
外側のフレーム(frame_out.html)
左フレーム(20%の方) :ターゲット名をAとする
 読み込みファイル名をA.htmlとする。
右フレーム(80%の方) :ターゲット名をBとする
 読み込みファイル名をB.htmlとする。
------------------------------------
二層目
------------------------------------
内側のフレーム(frame_in.html)
左側のフレーム(任意の幅):タ...続きを読む


人気Q&Aランキング

おすすめ情報