- ベストアンサー
DIVタグでの擬似インラインフレーム
msi21stの回答
お役に立てて何よりです。 「とほほのWWW入門」と言うサイトで、 WEBに関するさまざまな技術が記載されていますので、大変役立つと思います。 参考URLに記載させて頂きましたので、 参考にされて見ては如何でしょうか。 overflowの各パラメータの解説も掲載されています。 >overflow:scrollにバグがあるということなのでしょうか? Netscape等ではレイアウトの崩れは起こらなかったので、 Internet Explorerのレンダリングエンジンのバグの可能性があると思います。
関連するQ&A
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか?また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- tableタグについて
tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示(Chrome)では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか? どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}
- ベストアンサー
- CSS
- tableタグについて
どのようのウィンドー幅になっても全ての文字が表示させたいのですが、以下のタグの何処がおかしいのでしょうか。 <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <div align=center> <table width="700"> <tr> <td>あいうえお・かきくけこ・さしすせそ</td> </tr> </table> </div> </td> </tr> </table> この場合、ウィンドー枠を右から左に向かって縮小していくと、「あいうえお・かきくけこ・さしすせそ」の”そ”から順に見えなくなります。 そのではなくて、 あいうえお かきくけこ さしすせそ になり、 さらに縮小すると あい うえ おか かき くけ こさ しす せそ の様な感じで すべてが表示されるようにしたいのですが、どのようなタグを挿入すれば良いのでしょうか? お願いします。
- ベストアンサー
- ホームページ作成ソフト
- IEではうまく行くのですが他のブラウザでも表示できるように…
下記のようにしたのですが、IEではうまくゆくのですが、 他のブラウザではできません。 同じようにするにはどのように調整したらよいのか教えてください。 <DIV> <SPAN style="overflow:hidden;width:30px"> <TABLE border="1" width="100%"> <TR bgcolor="silver"><TD>A</TD></TR> </TABLE> </SPAN> <SPAN id="title" style="overflow-y:scroll;overflow-x:hidden;width:150px;"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR bgcolor="silver"><TD>C</TD><TD>D</TD><TD>E</TD></TR> </TABLE> </SPAN> </DIV> <!--本体部分--> <DIV> <SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:30px;height:80px;"> <TABLE border="1" style="width:100%" bgcolor="#ffffcc"> <TR><TD>F</TD></TR> <TR><TD>K</TD></TR> <TR><TD>P</TD></TR> <TR><TD>U</TD></TR> </TABLE> </SPAN> <SPAN id="maincols" style="overflow:scroll;width:150px;height:80px" onscroll="fnc_scroll()"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR><TD>H</TD><TD>I</TD><TD>J</TD></TR> <TR><TD>M</TD><TD>N</TD><TD>O</TD></TR> <TR><TD>R</TD><TD>S</TD><TD>T</TD></TR> <TR><TD>W</TD><TD>X</TD><TD>Y</TD></TR> </TABLE> </SPAN> </DIV> <SCRIPT language="javascript"> <!-- function fnc_scroll(){ document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop; document.all.item('title').scrollLeft=document.all.item('maincols').scrollLeft; } --> </SCRIPT>
- ベストアンサー
- JavaScript
- 【CSS】floatで左右に並べた<div>のマージンが効かない。
CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- 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
- css で指定した div と table の幅が
html と css の勉強中です。 スタイルシートで次のように同じ幅を 指定したのですが、表とブロックの幅が 揃いません。 <style><!-- #a {width:300px;border:solid 2px} #b {width:300px;border:solid 2px} --></style> <div id="a"> <p> a b c d </p> </div> <table id="b" border="1"> <tr> <td>a</td><td>b</td><td>c</td><td>d</td> </tr> </table> ブラウザは IE6と opera で見てみました。 お願いします。
- ベストアンサー
- CSS
- OnMouseout()内部タグへ移動しても発生してしまう
いつもお世話になります。 OnMouseout()についてですが、内部タグへ移動しても発生してしまい困っています。 下のスクリプトで、灰色の<div>タグを出たときOnMouseout()イベントが発生し、<div>タグ内にマウスポインタががある内はOnMouseout()が発生してもらいたくないのに<div>タグ内にある<table>タグ内へ移動したときも発生してしまいます。 z-indexで、<div>タグを一番上に表示すれば良いかとやってみましたが、だめでした。 おわかりになる方なにとぞよろしくお願いいたします。 function tstOnMouseout(){ strHtml='<div style="width:200px;background-color:Silver;z-index:10;" onmouseout="this.innerHTML=\'bbbbbb\';">'; strHtml+='<table style="margin:50px;background-color:white;z-index:1;">'; strHtml+='<tr><td style="border:solid red 5px;">aaaaaaaaa</td></tr>'; strHtml+='</table>'; strHtml+='</div>'; document.write(strHtml); }
- ベストアンサー
- JavaScript
- cssで<div>にpaddingを指定したとき
下のように、cssで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に740pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか? また、こうなるのは、私だけなのでしょうか? <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- テンプレートを使ったHP作成☆リンクタグについて
nanosという無料のHP作成サイトでHPを作成中です。 テンプレートを使ってtopページを作ろうと思った所、リンクを貼った文字が薄いグレーになり、点線の下線までついてしまいます。カーソルをあてるとそれがピンクになります。 多分そういう設定になっているとは思うのですが、タグを見てもピンクの色指定の場所も無く、どう直したらいいのかわかりません。 ちなみに、カーソルをあてても、文字を変化させずに文字にリンクを貼りたいです。 タグのに何か設定があるのでしょうか? <br><center><pc><table width="550"><tr><td><div style=margin:10px;padding:5px;line-height:16px;></pc><nopc><table width="550"><tr><td><div style=margine:10px;padding:5px;line-height:15px;></nopc><div align="left"><font size="4" color="#000000" face="HGep021">タイトル</font> <a href="ページのurl">コチラ</a>より御入室ください。</font> </span></div></td></tr></table></center> <center><table width="550"><tr><td><div style=line-height:16px;><font size="1"> という感じです。 どこの部分がどんな表現をするのか教えていただけたらありがたいです。 宜しくお願いします。
- ベストアンサー
- HTML
お礼
ほんとうにありがとうございました。 ずっと、困っていたので、助かりました。