dポイントプレゼントキャンペーン実施中！

インラインフレーム内の表示位置を修正できません

解決済

  • 質問者：tfj3116
  • 質問日時：
  • 回答数：2件

インラインフレーム内の表示位置を修正できません

　<iframe src="～.php" align="top" frameborder="1" scrolling="no" width="177" height="100" hspace="0" vspace="0" marginwidth="0"></iframe>

というソースでインラインフレーム内に、アンカータグの列（phpで生成）を表示させたいのですが、
このアンカータグの列の表示位置が、インラインフレームの左上端から中央（右下）方向にずれてしまいます。

<iframeフレームの設定をあれこれ修正してみたのですが、うまくいくません。
解決策をどうか教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： webcom
  • 回答日時：

まずは、スタイルシートの終了タグが抜けているのを修正し、マージン、パディング０をtable　formにも指定いてください。


<style type="text/css">
<!--
#an1{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
-->

　　　　↓↓↓↓↓　※下のように変更する

<style type="text/css">
<!--
body, table, form {
margin: 0px;
padding: 0px;
}

#an1{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
-->
</style>
    • good
    • 0
    • 件
通報する
この回答へのお礼

返信が大変遅れて申し訳ありません。
教えて頂いた方法で、marginやpaddingの値をあれこれ設定して
試したところうまく位置合わせができました。

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

通報する
お礼日時：2007/12/18 19:44

No.1

  • 回答者： webcom
  • 回答日時：

これの位置調整は<iframe>ではできません、～.phpのアンカータグの位置調整ですから、


～.phpのbodyのマージン、パディングを０にする事で左上に表示されます。
更にアンカーの位置をマージン、パディングの0pxを適当な数字に調整すれば自在に配置できます。
～.phpのサンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;　charset=Shift_JIS">
<title>インライン表示</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}

#hoge {
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

-->
</style>
</head>
<body>
<a href="test.html" id="hoge">○○○○○○○○○○○○</a>
</body>
</html>

この回答への補足

ご教示ありがとうございます。
教えて頂いた方法で早速トライしてみました。

bodyタグに対するマージンとパディングの設定（外部cssに盛り込みました）をしたところ、
インラインフレーム内における表示の横方向は、望ましいものとなりました。
なお、この状態では、縦方向のズレは、下方に約２０ピクセル程度と思われます。

しかし、アンカータグに対するマージンとパディングの設定（※を付記しました）をすると、
インラインフレームのどこか大分外側にはみ出した位置にシフトしたようでして、
インラインフレームのサイズを一時的に広げてずれの程度を把握しようとしたのですが、
できませんでした。

回答者様には、自分の質問時に前提となることを言葉では表現しきれなかったため、
回答頂く際にはあれこれと思考を重ねる結果となったことと思われます。

そこで、今度は、インラインフレームに表示されるhtmlの要部を以下に示しますので、
さらに、どのような対処をすればよいか、原因となる可能性等…
どうか再度のご教示をお願い致します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="….css" rel="stylesheet" type="text/css">
<link rel=StyleSheet href="….css" type='text/css'>
<style type="text/css">
<!--
#an1{　　　　　　　　　　　　・・・※
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
-->

</HEAD>
<BODY>
<TABLE cellPadding=0 width=177 background=… border=0>
<TBODY>
<TR valign="top">
<TD valign="top">
<A href="javascript:document.getElementById('…').submit();" id="an1">…</A>　・・・※
<FORM id=… action="….php" method="post" target="_blank">
<INPUT type="hidden" value="…"　name="…">
</FORM>
</TD>
</TR>
</TBODY>
</TABLE>
<IMG src="….gif"><br>
<TABLE cellPadding=0 width=177 background=….gif border=0>
<TBODY>
<TR valign="top">
<TD valign="top">
<A href="javascript:document.getElementById('…').submit();">…</A>
<FORM id=… action="….php" method="post" target="_blank">
<INPUT type="hidden" value="0" name="…">
<input type = "hidden" name = "…" value = "…">
</FORM>
</TD>
</TR>
</TBODY>
</TABLE>


</BODY>
</HTML>

補足日時：2007/12/08 21:11
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報