フローティングフレームのスクロールについて

前へ 次へ
このQ&Aのポイント
  • フローティングフォームを使用したホームページを作成しています。ソースは下のようになっています。列名を固定して、動的に書かれる一覧部分だけにスクロールバーを表示させたいのですが、うまくいきません。
  • menu_list.aspという別のファイルにASPを使用して、動的にデータを書いています。列名を固定して、動的に書かれる一覧部分だけにスクロールバーを表示させたいのですが、うまくいきません。
  • スクロールするときに表示される▲▼のどちらか一方しか表示されず、一番下の列だけしっかりと表示されません。どうしたらすべてきれいにスクロールできるのでしょうか？
回答を見る
  • ベストアンサー

フローティングフレームのスクロールについて

フローティングフォームを使用したホームページを作成しています。 ソースは下のようになっています。 <table width="550" border="1" cellpadding="3" cellspacing="0"> <tr> <td width="200" bgcolor="#FFCC00">列名</td> <td width="350" bgcolor="#FFCC00">列名</td> </tr> </table> <div style="width:568px;height:184px; overflow:hidden;"> <iframe name="List" src="menu_list.asp" width="566" height="200" frameborder="0"> </iframe> </div> menu_list.aspという別のファイルにASPを使用して、 動的にデータを書いています。 列名を固定して、動的に書かれる一覧部分だけにスクロールバーを表示させたいのですが、うまくいきません。 なぜかスクロールするときに表示される▲▼のどちらか一方しか表示されず、一番下の列だけしっかりと表示されません。どうしたらすべてきれいにスクロールできるのでしょうか？ どなたかおわかりになる方がおみえになりましたら教えてください。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
noname#25358
noname#25358
回答No.1

　直前の <div> と <iframe> とではサイズが違うからです。 　<div> 側が px 単位になっているのに対し、<iframe> は単位が省略されています。 　ＩＥでは単位を省略すると pt 扱いになるので、<iframe> の方が <div> よりだいぶ大きくなってしまいます。 　大きく膨れた分が隠れているのです。

000200b
質問者

お礼

修正しましたところ、表示されるようになりました。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • テーブル内のスクロール

    初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • Iframeとして呼び出すページを120ｐｘ以下を表示したい

    Iframeを使いたいのですが、A.htmlの高さ120pixから下をIframeで指定したいときはどうしたらいいでしょうか。 <html> <head> <title>testtitle> </head> <body> <div width:100%; height:120px;> <table> <tr> <td><iframe src="A.htm" width="100%" height="100%" frameborder="0" scrolling="no" overflow:no></iframe><td> </tr> </table> </div> </body> </html> 呼び出すIframeの中身のページについて 高さを120pix以下を表示したいのですが。 よろしくおねがします。

  • 指定した箇所へスクロールさせたい

    お世話になります。 a.htmlの中のテーブルのセル内に、テキストを入れてあります。このセルにだけ縦スクロールバーをつけてあります。下記ソースの<div class="scrlbox">の部分です。 別ページのb.htmlにあるリンクをクリックした時、a.htmlを子画面で開いて、なおかつテーブルのセル内の指定した行まで自動でスクロールダウン/アップするということは可能でしょうか？ （window.scroll()なかんじではなく、セル内"だけ"がスクロールするイメージです。） a.htmlとb.htmlの連携部分はあまり気にせず、テーブルのセル内のテキストだけを任意の場所へスクロールさせることが可能かどうか、説明がややこしいですが、ご教授、よろしくお願いいたします。 ----------------------- a.html ----------------------- <table border="1" width="450" height="420" bgcolor="#9999ff"> 　<tr> 　　<td width="15" height="350">&nbsp;</td> 　　<td width="420" height="350"> 　　　<div class="scrlbox"> 　　　　★みだしその１<br/> 　　　　ああああああ(長めのテキストが入ります)・・・ 　　　　<br/><br/> 　　　　★みだしその２<br/> 　　　　ああああああ(長めのテキストが入ります)・・・ 　　　　★みだしその３<br/> 　　　　ああああああ(長めのテキストが入ります)・・・ 　　　</div> 　　</td> 　　<td width="15" height="350">&nbsp;</td> 　</tr> 　<tr><td colspan="3" align="center">footer</td></tr> </table>

  • テキストボックスの表示

    テキストボックスの表示 テキストボックスを２つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＡ </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＢ </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか？

    • ベストアンサー
    • HTML
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • スクロールバーが表示されない。。

    枠つきのスクロールバーをもらい ブログにつけようとしましたが、 なぜか枠だけでスクロールバーだけが表示されません。。 原因はなんでしょうか？ 改善の方法はありますか？ 下のタグです <div style="width:337;height:200;overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff; "> <Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95"> <Tr><Td height="30" bgcolor="#004a95" align="left"> <font size="3" color="#ffffff" face="ＭＳ ゴシック"> タイトル部分</font> </Td></Tr> <Tr><Td bgcolor="#ffffff" align="center" valign="top"> 内容部分 </Td></Tr> </Table></div>

    • ベストアンサー
    • CSS
  • スクロールするテーブルに背景画像を固定させたいのです

    ＨＴＭＬでテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <html> <TABLE border="0" width="695" background="top-6.GIF"> <TR><TD width="72" height="34"></TD><TD width="623" height="34"><font color="red"><b><center>お知らせ</center></b></font></TD></TR> </TABLE> </DIV> </DIV> <!--本体部分--> <DIV style="overflow-y:scroll;direction:ltr;width:695;height:114px"> <DIV style="direction:ltr"> <TABLE border="0" width="695" background="top-7.GIF" style="background-attachment: fixed"> <TR><TD width="72">A</TD><TD width="623">B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TR><TD>I</TD><TD>J</TD></TR> <TR><TD>K</TD><TD>L</TD></TR> <TR><TD>M</TD><TD>N</TD></TR> <TR><TD>O</TD><TD>P</TD></TR> </TABLE> <DIV style="overflow-y:scroll;direction:ltr;width:695; scrollbar-base-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF"> <DIV style="direction:ltr"> </DIV> </DIV> </html>

  • Layerの中にあるリンクがmacで動作しません

    以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript～window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>

    • ベストアンサー
    • HTML
  • オークションの説明文を作っているのですが、どうしたらいいのでしょうか

    オークションのページを現在作っていて、下記のページを作りました。 コピーして、オークション→出品で、確認してもらいたいのですが、 <center><table border=1 width=800> <tr><td width=800 bgcolor=#ffcc99> <table width=800 border=1> <tr><td width=800 bgcolor=#ffccff> <table width=800 border=1> <tr><td width800 bgcolor=#ffccff> <table border=1> <TR> <TD BGCOLOR=#ffffff><IMG SRC=http://homepage3.nifty.com/finaltida10807/top-2.jpg BORDER=0><BR></table> <table width=800 height=200> <tr><td><table width=260 height=220 border=1><tr><td> <hr><img src=http://homepage3.nifty.com/finaltida10807/90d1-2.jpg><hr></td><hr> <td><table width=260 height=220 border=1> <font size=2>-American Eagle-<BR><BR> 1972年に、アウトドア用品店としてスタート。<BR><BR> 1992年頃からジーンズを中心としたアメカジ<BR><BR> ブランドへ転換を始め現在では、アメリカ<BR><BR> 国内に、８００以上の店舗を持ち、GAPや<BR><BR> アバクロと肩を並べる、アメカジのスタ<BR><BR> ンダード的な存在である。</font> <td width=260 height=220 bgcolor=#cccccc><table bgcolor=#cccccc border=1><font size=2>海外のさまざまな所から、仕入れています。 アバクロ、ホリスター、NIKE、adidas、etc,<BR></font> <font size=2 color=red>※当方の出品している商品は、全て正規品を扱っておりますので、安心してご入札ください。</font></td></tr></td></tr></table><hr> <tr><td><table border=1 bgcolor=#ffffcc width=400> <tr><td bgcolor=#ffcc00 width=400 height=60 colspan=2>AE fit pant</td></tr> <tr><td colspan=2 bgcolor=#ffffcc height=120> <FONT SIZE=-1 COLOR=#330000>アメリカンイーグルショートパンツです。<BR> しっかりしたコットンツイル生地にビンテージウォッシュ加工。<BR> 新品なのに長く着込んだ感が有りとっても良い感じです♪<BR> プレーンなデザインなので使い勝手が良さそうです！<BR> 裾の切りっぱなし加工が夏らしいワイルド感を醸し出してます。</FONT></td></tr><font size=2> <tr><td height=45 bgcolor=#ffcc00>状態</td><td>新品未使用タグ付き</td</tr> <tr><td bgcolor=#ffcc00>仕様</td><td>メンズ</td></tr> <tr><td bgcolor=#ffcc00>素材</td><td>ポリエステル１００％</td></tr> <tr><td bgcolor=#ffcc00>カラー</td><td>ブルー</td></tr> <tr><td bgcolor=#ffcc00>サイズ</td><td>Ｍ</td></tr> <tr><td bgcolor=#ffcc00>寸法</td><td>着丈６０ｃｍ</td></font> </table></td> このページの左下に、状態とかカラーとか記述してあるテーブルがあると思うのですが、この右となりに、 <table border=1 width=400><tr><td>発送詳細</td></tr> <tr><td>ヤマト宅急便/全国一律５００円<BR> ※複数落札も同じ料金です。</td></tr></table><BR> <table border=1 width=400><tr><td>支払い詳細</td></tr> <tr><td>・みずほ銀行<br> ・郵貯銀行<br> ・ヤフー簡単決済</td></tr></table><BR> <table border=1 width=400><tr><td> 注意事項</td></tr><tr><td> ●商品は、全て正規品扱っております。万が一、商品が偽物と判明した場合には、落札価格と送料を返品いたします。<BR><BR> ●基本的に、商品が不良品だったり傷物だった場合を除き、ノークレーム、ノーリターンでお願いします。<BR><BR> ●商品の発送には注意を払っておりますが、万が一、誤送をしました場合は、取引ナビにてご連絡ください。正しい商品を発送いたします。<BR><BR> ●何かご不明な点がございましたら、お気軽にご質問ください。</td></tr></table> と、この３つのテーブルを右となりに、はめたいのですが、どのように htmlを記述すればいいのでしょうか？何回か、思考錯誤しているのですが、なかなかできません。よろしくお願いします。

  • テーブルの中に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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する