- ベストアンサー
インラインフレーム内の表示位置を修正できません
- インラインフレーム内の表示位置を修正する方法について教えてください。
- アンカータグの列がインラインフレーム内でずれてしまう問題が発生しています。
- うまくいかない原因や解決策について教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まずは、スタイルシートの終了タグが抜けているのを修正し、マージン、パディング０を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>
その他の回答 (1)
- webcom
- ベストアンサー率67% (19/28)
これの位置調整は<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>
お礼
返信が大変遅れて申し訳ありません。 教えて頂いた方法で、marginやpaddingの値をあれこれ設定して 試したところうまく位置合わせができました。 ありがとうございました。