- ベストアンサー
iframeで、右側に余分な空白ができる
HMTLのiframeで、右側に余分な空白ができます。 padding-rightで余白を詰められると思ったのですが、詰まりません。 詰める方法はないでしょうか？ ■呼び出し元 <html> <body> <iframe src="./frame.html" width="310" style="padding-right:0px;"> </iframe> </html> ■呼び出される側 <html> あああああああああああああああああああああ<br> あああああああああああああああああああああ<br> </html>
- ps5550
- お礼率65% (129/196)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
私はiframeは、transitionalなので使いませんが、単純に呼び出されるHTML側のスタイルに従うだけです。 [埋め込まれるHTML]http:は、httＰ:に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "httＰ://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,baody,p{margin:0;padding:0;background-color:gray;} p{line-height:1.4em;text-indent:1em;background-color:yellow;} --> </style> </head> <body> <h1>サンプル</h1> <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、わゐうゑを</p> <p>あいうえお、かきくけこ、さしすせそ、たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、わゐうゑを</p> </body> </html> div{overflow:auto;} なら、staticなので、お勧めです。
関連するQ&A
- テーブルの中にiframe
テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }
- ベストアンサー
- HTML
- htmlからiframeされないようにする設定
htmlでiframeされないようにする設定 htmlでＷＥＢページを作成していて偶然気付いたのですが、iframeでgoogleを指定しても表示されません。 iframe先をまだ作っていなかった為、ダミーで埋め込んで気付きました。 yahoo!など他のサイトでは表示されます。 そこで思ったのが、自分のサイトが知らないところで他のhtmlのiframeに納まっているなんてことは滅多にある事ではないが、あったら気持ち悪い。念のため止められるなら止めておきたい。 googleのように他のhtmlからiframeで呼び出せないようにするには、どのような設定が必要なのでしょうか。 <html> <head> <title>テスト</title> </head> <body> google<br> <iframe src="http://www.google.co.jp/" height="768" width="1024">google</iframe><br> <br> YAHOO!<br> <iframe src="http://www.yahoo.co.jp/" height="768" width="1024">YAHOO!</iframe><br> <br> </body> </html>
- ベストアンサー
- HTML
- フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの
フレーム構造のページで左右上下の余白を0にしたいのですが、以下の何れの方法でも ほとんど変化がありません。 １．<frame src="green.html" marginwidth="0" marginheight="0"> ２．<body style="margin:0px;padding:0px;"> ３．<style type="text/css"> <!-- body { margin:0px;padding:0px;} --> </style> 確実な方法を教えてください。 宜しくお願い致します。
- 締切済み
- CSS
- wordpressの空白設定について
wordpressのサイドバー（ウィジェット）に以下のコードを書きましたが、右側に余白ができずに困っています。（詳細は、画像をご参照ください） 赤矢印のところに、5pxくらいの余白を設定したいです。 どうすれば、右側にも余白を設定できるのでしょうか？ どうぞよろしくお願い致します。 <div class="twibox"> <div class="textwidget"><img width="100" height="100" src="http://XXX.XXX.jp/pic/XXX.png" alt="" / class="float-left" style="margin:5px 14px 5px 12px;"><ul><li> 名前：XXXX<br/> 年齢：XXXX<br/> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</li></ul></div></div>
- ベストアンサー
- ブログ
- ホームページを作っています、ページ内にiframeで他のページを表示さ
ホームページを作っています、ページ内にiframeで他のページを表示させています。 IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事が できるのですが、Firefoxだとスクロールバーが出ません・・・ どなたか表示させる方法をご存知でしたら教えてください。 以下HTML記述 <iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe> CSS記述 #iframe4{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 420px; height : 490px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; }
- ベストアンサー
- HTML
- javascript cssの値を取得、変更
タイトルの通りですが、javascriptにてcssの値を取得することはできますでしょうか？ 考えている機能は、URLを指定するtextboxがあり、そこに入力したURLのボックスを解釈し、分解してmarginやpadding、border、width、height、合計縦幅、合計横幅…といった情報を出してくれる。その際できればcssで指定のないものも表示したい。いらない要素は破棄。 例： <html><style type="text/css"> #wrap{ width:250px; height:300px; margin:5px 10px; padding:10px 5px; } #hoge{ width:250px; height:50px; border:5px solid; } #moge{ width:100px; height:150px; margin:5px 10px; padding:10px 5px; } </style> <body> <div id="wrap"> <div id="hoge"> <ul> <li>aaa</li><li>bbb</li> </ul> </div> <div id="moge"> <img src="dammy1.gif" /> <img src="dammy2.gif" /> </div></div> </body></html> 適当ですけど、こんな感じだったら、 <html><style type="text/css"> #wrap{ background:#333; width:250px; height:300px; } #hoge{ background:#666; width:250px; height:50px;} #moge{ background:#999; width:100px; height:150px; } </style> <body> id名<br /> #wrap<br /> #hoge<br /> #moge<br /> … <div id="wrap"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="hoge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="moge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> </body></html> こんな感じにしてhtmlを吐き出す。 そんなことは可能でしょうか？少し大変になっても可能なら頑張って作ろうと思っています。よろしければ教えていただけないでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- IE7だけに出る謎の空白（CSS）の解決方法
以前も似たような症状が出たのですが・・・ IE７でだけ、謎の空白が約3px程度出てしまいます。場所は<dl></dl>と<img>の間です。 イメージとしては上から3段をくっつけて中身（<dl></dl>）だけ高さを可変にしてひとつの枠のように見せたいと考えています。 ですがIE７でだけ空白ができてしまうのです。 原因と解決方法を教えていただけないでしょうか？ <div id="right"> <img class="top" src="img/bg-rtop.gif" /> <dl> <dt><img src="img/right-tit1.gif" /></dt> <dd>ああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit2.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit3.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit4.gif" width="200" height="20" /></dt> <dd>あああああああああああああああああああああああああ</dd> </dl> <!-- ここで空白ができてしまう・・・--> <img class="under" src="img/bg-runder.gif" /> </div> ■CSS @charset "shift_jis"; body { text-align: center; margin: 0px; background-image: url(img/bg.gif); vertical-align: bottom; line-height: 165%; letter-spacing: 1px; font-size: 12px; } /* 右側の設定*/ #right{ width:200px; float:right; } #right .top { margin: 20px 0 0 0; } #right dl { background-image: url(img/bg-rmiddle.gif); margin: 0px; padding: 0 0 20px 0; } #right dt { padding: 10px 0 0 0; } #right dd { margin: 10px 0 0 12px; padding: 0 0 0 0; } #right .under { margin: 0px; } 一部省略してます・・・ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- iframe ピンポイント表示
<body> <iframe width="235" height="100%" src="http://～"> </iframe> </body> （詳細略） このままだとＵＲＬ先のページがフレームの左と上に合ってしまい、 スクローラーバーが縦横に出ます。 これをＵＲＬ先の特定の部分が表示されるようにするためには、 どのようにすればよいでしょうか？ 例えば、ＵＲＬ先の上から 100px 左から 100px の部分を、 フレームの左上隅にピタット合わせて表示したいという感じです。 相手先に<a name=""></a>でもあればそこに合わせられますが、 当然私側からはできません。 スクローラーバーを出ないようにできれば、尚いいのですが・・。 よろしくお願いします。
- ベストアンサー
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
回答ありがとうございます。 呼び出される側に、これを加えたらいっぱいいっぱいまで表示できるようになりました。 ありがとうございます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "httＰ://www.w3.org/TR/html4/strict.dtd">