gooID利用規約 改定のお知らせ

メニューが書かれている画像をクリッカブルマップを使用して
さらにその画像内にインラインフレームを表示させたいと思うのですが、
その画像の上にインラインフレームを乗せるとこまでは上手くいったのですが
解像度(画面サイズ)を変えて見たところ、
インラインフレームの位置がずれて表示されてしまいます。

元の画面サイズが1280x1024(綺麗に表示される)で、
変更後の画面サイズは1024x768(ずれて表示される)です。
どんな画面サイズからでもHPが見れるようにしたいのです。

ちなみに、クリッカブルマップを使用した画像の位置は
どんな画面サイズになっても画面のど真ん中にくるようになっています。
インラインフレームだけがどうしてもずれてしまうのでお手上げです;

どなたか詳しい方、教えていただけると助かります。
宜しくお願いします。

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

A 回答 (1件)

下の例のような感じで。


(クリッカブルマップを含むブロックを好きなように配置すれば、
iframeの位置も親ブロックに従って配置されます)

<html>
<head>
<title></title>
<style type="text/css">
#box{position:relative;}/*iframeを相対配置するために*/
#if01{
/*親(#box)の左上からの位置を指定*/
position:absolute;
top:XXpx;
left:YYpx;
}

</style>
</head>
<body>
<div id="box">
<img ><!-- クリッカブルマップ -->
<iframe id="if01"></iframe>
</div>
</body>
</html>
    • good
    • 1
この回答へのお礼

ご回答有難うございました!!
分かりやすくタグで説明してくださったおかげで、
どんなサイズでもぴったり表示されるようになりました!
半日かかっても解決しなかったので本当に助かりました。
早く聞けばよかったです。
本当に有難うございました!

お礼日時:2007/07/24 19:32

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

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

Qインラインフレームの表示位置を指定したい

インラインフレーム自体の表示位置を指定したいと思っています。
ページの大きさに対して中央に、
インラインフレームのページを表示したいと思っているのですが、

横位置は、ALIGN="center"を使って指定出来きましたが、
縦位置の指定が出来ないでいます。

色々と検索してみたのですが、
もしかしたら出来ないのでは。。。とも思っています。
ですが、Web上には中央に配置されるページとかもあるので、
出来ないはずはないのですが、
タグをみても量がおおくてわかりません^^;

恐れ入りますがよろしくおねがいしますm(__)m

Aベストアンサー

高さと幅が固定されていれば、以下のcssが有効のようです。
<style type="text/css">
<!--
#center{
height:200px;
width:500px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-250px;
border:solid 1px #666666;
}
-->
</style>

<iframe src="" name="" id="center">
インラインフレームを使用しています。
</iframe>

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

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

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

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

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

Aベストアンサー

まずは、スタイルシートの終了タグが抜けているのを修正し、マージン、パディング0を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>

Qテキストボックスの入力をリセット

ボタンが押されたら、テキストボックスの入力内容を削除するにはどうしたらいいでしょうか?

Aベストアンサー

こんな感じ。

<form>
<input type=button value="clear" onClick="this.form.t.value = ''">
<input type=text size=50 name=t>
</form>

ボタンの this.form.t の t が、テキストの名前になっていて、押されると
空の文字列を入れる、だけです。

もし、フォーム全体のテキストをクリアするならば、こんな方法もあります。

<form>
<input type=button value="clear" onClick="this.form.reset()">
<input type=text size=50 name=t1>
<input type=text size=50 name=t2>
<input type=text size=50 name=t3>
</form>

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。


人気Q&Aランキング

おすすめ情報