インラインフレームでのテーブル表示について
-
0 名前： ピッピ ： 2005/08/14 20:09 ［URL］
- 初めまして。こちらのＨＰを参考に、初作成中です。
メニューをインラインフレームにリンクさせて表示したいと考えています。
質問は、１．インラインフレーム内に表示させるテーブルは同じサイズに
したのですが、ずれて表示してしまうのを直すにはどうのようにしたらよい
でしょうか？（縦のスクロール表示は構わないのですが）
２．テーブル（ｗ：６００ ｈ：４００）の半分をインラインフレームに
したいのですが、こちらもずれてしまいます。
この手法が間違いなのか、もっと良い方法があるのか、ぜひ教えて下さい。
-
1 名前： ピッピ ： 2005/08/14 20:09 ［URL］
- おはようございます。
URLは、http://www.k2.dion.ne.jp/~sunnydog/ です。
困っているページのソースを添付します。
テーブルの中にインラインフレームを使ってリンクをしたいのですが、
表示すると、下記の場合、左右の高さがずれて、まっすぐになりません。
この方法が間違っているのか、記述モレがあるのか、もっと良い方法が
あるのか、どなたかご教授願います。よろしくお願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>リンク</title>
<style type="text/css">
<!--
table {margin:0;border:0;}
-->
</style>
</head>
<body>
<font size="1"face="Tempus Sans ITC"color="557799">
<p>
<table border="0" width="600" height="400" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="20" align="center" valign="top"><img src="img/line/line9t.gif" border="0">
</td>
<td width="280" align="center" valign="top"><img src="img/button/link.gif" border="0" align="center" valign="top"><br>
<a href="link-r.html" target="link"><img src="img/icon/b-t-r.gif" border="0" align="left"></a><br><br>
<a href="link-p.html" target="link"><img src="img/icon/b-t-p.gif" border="0" align="left"></a><br><br>
<a href="link-d.html" target="link"><img src="img/icon/b-t-d.gif" border="0" align="left"></a><br><br>
<a href="link-h.html" target="link"><img src="img/icon/b-t-h.gif" border="0" align="left"></a><br><br>
<a href="link-m.html" target="link"><img src="img/icon/b-t-m.gif" border="0" align="left"></a><br><br>
</td>
<td width="300">
<iframe src="link-top.html" name="link" frameborder="no" scrolling="no" width="300"
height="400">
</iframe>
</td>
</tr>
</table>
</body>
</html>
-
2 名前： tk ： 2005/08/14 20:09
- 具体的に書かれていないのでカンですが、
リンクのページの画像とインラインフレーム内の画像の位置のずれの事でしょうか？
とりあえず、http://www.k2.dion.ne.jp/〜sunnydog/link-top.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Contnt-Style-Type" content="text/css">
<title>パピヨンのお友達</title>
<style type="text/css">
* { margin:0;padding:0;}
</style>
</head>
<body>
<table border="0" width="290" height="400" align="right">
<tr>
<td width="20" align="center" valign="top"><img src="img/line/line9t.gif"border="0"align="center"valign="top"> </td>
<td width="270" align="left">
<font size="2" face="coopoppo bold" color="557799">
お友達募集中です！ご連絡下さい。<br>
<center><a href="mailto:seasonal_4@r4.dion.ne.jp"><img src="img/icon/me-p.gif" border="0"></a></center><br>
</td>
</tr>
</body>
</html>
あと、<body>の開始タグが無かったり、半角スペースが無かったりしてますよ。
-
3 名前： ピッピ ： 2005/08/14 20:09 ［URL］
- tk 様
ありがとうございました！
教えていただいた通り、修正しました。
ずれることなくピシっと表示できるようになりました。
大変勉強になりました。
タグの入力ミスも沢山ありましたが、これも正しくできました。
しかし、インラインフレーム自体のスクロールバーは、「ズレ」が
なくても表示してしまうのでしょうか？
縦スクロールは必要で横は不要なのですが、
スクロールの非表示以外に方法はあるのでしょうか？
改めてお教え頂ければ幸いです。
http://www.k2.dion.ne.jp~/sunnydog/
-
4 名前： *** ： 2005/08/14 20:09
- index.htmlのソースを少し変更すれば良いのでは？
<P>タグ使っているのなら、センタリング。
width="600"を80%ぐらいに変更しては？
<p align="center">
<iframe src="iframe-top.html" name="iframe" width="80%" height="400"
marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" align="middle">インラインフレームを使用しています。<br>
対応しているブラウザで表示願います。<br>
</iframe></p>
-
5 名前： ピッピ ： 2005/08/14 20:09 ［URL］
- *** 様
ありがとうございました！
教えていただいた通り、修正して横スクロールを消せました。
<p>タグのセンタリングも修正しました。
苦悶の日々でしたが、教えていただいたお陰で、
すっきりしました。
また楽しみながら勉強して、工夫をして精巧なものに
していきます。
tk 様、*** 様、本当にありがとうございました！
