テーブル内でドロップダウンメニューを使った際の行間
- テーブル内でドロップダウンメニューを使用する際の行間に問題が発生しています。
- テーブル内のドロップダウンメニューの下に不要な空白ができるため、レイアウトが崩れて困っています。
- HTMLソースをそのままIE6で表示すると、問題がより明確になります。
- ベストアンサー
テーブル内でドロップダウンメニューを使った際の行間
テーブルの中に配置したフォーム（ドロップダウンメニュー）の下に 無用な空白ができてしまい，このままだとレイアウトが崩れて困っています． 文末のHTMLソースをそのままIE6で表示いただくとご理解いただけると思います． <select size="1">としても改善しないため， <body>，<table>，<tr>，<td>，<form>などへ，CSS で， height で小さい数値を入れたり，line-height で行間詰めを試みても改善せず． これはもう仕方ないでしょうか？ よろしくお願い致します。 <html> <head><title></title></head> <body> <table border="1"> <tr> <td> <form> <select onchange="location=this.options[this.selectedIndex].value"> <option>選択</option> <option value="1ndex.htm">1 <option value="2frame.htm">2 </select> </form> </td> </tr> </table> </body> </html>
- litton101
- お礼率89% (1106/1240)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<form>～</form> の位置の問題では？ 以下のソースでお試しください。 <html> <head><title></title></head> <body> <form> <table border="1"> <tr> <td> <select onchange="location=this.options[this.selectedIndex].value"> <option>選択</option> <option value="1ndex.htm">1 <option value="2frame.htm">2 </select> </td> </tr> </table> </form> </body> </html>
関連するQ&A
- ドロップダウンメニューによるアイフレームへのリンク
現在Webサイトを作っています。 ですがドロップダウンメニューからリンクをし、リンク先をアイフレームにするのがうまくいきません。 問題のページのHTML、及びJavaScriptは以下の通りです。 <html> <head> <script type="text/javascript"> <!-- function Mylink(form,sel){ mlink=sel.options[sel.selectedIndex].value; if(mlink!="-"){parent.albumf.location.href=mlink;} } //--> </script> </head> <body> <center> <IFRAME name="albumf" frameborder=0 src="●●.html" scrolling=no allowtransparency=true></IFRAME> <BR> <BR> <FORM method="post"> <select onChange="Mylink(this.form,this)"> <OPTION selected value="-"> ＊ メニュー ＊</OPTION> <OPTION value="-">------------------------</OPTION> <OPTION value="●●.html">項目１</OPTION> <OPTION value="▲▲.html">項目２</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM> </center> </body> </html> JavaScriptに関する様々なページを調べましたが、どうしても自力で解決できませんでした。 どなたか改善方法を教えて下さい。 よろしくお願いします。
- ベストアンサー
- JavaScript
- <FORM>タグを使ったドロップダウンメニュー
以下のようなソースでドロップダウンメニューを作りました。 ---------------------------------------------------- <FORM> <SELECT NAME=list onchange=top.location.href=this.form.list.options[this.form.list.selectedIndex].value> <OPTION VALUE="index.htm">トップ <OPTION VALUE="new.htm">What's New! </SELECT> </FORM> ------------------------------------------------------ この時、「トップ」や「What's New！」などのボックス内に表示される文字の フォントサイズを大きくしたいのですが、何かよい方法はありませんでしょうか？？ できればIEとNNどちらのブラウザからでも見れるようにもしたいです。 よろしくお願いします。
- 締切済み
- HTML
- テーブル内のプルダウンの下に余白ができてしまう
以下のようなHTMLにて、プルダウンメニューの下になぜか余白ができてしまいます。 この余白部分を消すにはどうしたらよいでしょうか？ padding-bottomを使うのかといろいろ試していますが、解決できません。 どなたかご教授いただけますと幸いです。 <html> <body> <table border='1'> <tr> <td> コンテンツから探す </td> </tr> <tr> <td> <form> <select onChange="top.location.href=value"> <option value="#"></option> <option value="page1.html">ページ１</option> <option value="page2.html">ページ２</option> <option value="page3.html">ページ３</option> </select> </form> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- HTML教えて下さい！！！！
セレクトメニューで別ウィンドウを開きたいのですが出来ません。 教えてください！！よろしくおねがいします。 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" selected>●●●●●</option> <option value="../○○○/○○○/index.html" >●●●●●</option> <option value="../○○○/○○○/index.html">●●●●●A</option> </select> </form></td> </tr> で、ブランクを入れてみたのですが、、、 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" target="_blank" selected>●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> </select> </form></td> </tr> 、、、、ダメでした。間違っているんですよね。。。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- TABLE内のTABLEのHEIGHT属性が利かない
TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか？しょうがないのでしょうか？ それともCSSで解決できるものでしょうか？ ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- JavaScriptのSELECTの値について
JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。 下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で１０ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、 私は専門外なので、どのような処理を組めばよいかわかりません。 どなたか、わかる方ご教示願います。
- 締切済み
- JavaScript
- セレクトメニューで
セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION> メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION> メニュー</OPTION> </select> </form></TD>
- 締切済み
- JavaScript
- cookieでcheckbox項目の追加と削除とソート表示
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Std/tbl.htm を参考に下記のようにcheckboxを付け加えました。 <script type="text/javascript"><!-- function tblfilter(nm,key){ if(!document.getElementsByTagName) return; var trs = document.getElementById(nm).rows; for(var i=0; i<trs.length; i++){ var li = trs[i]; if(!li.title || li.title=='') continue; var found=0; if(key == '') found=1; else { var keys = li.title.split(','); for(var j=0; j<keys.length; j++){ if(keys[j] == key){ found=1; break; } } } li.style.display = found?'':'none'; } } // --></script> </HEAD> <BODY> <FORM onsubmit="return false;"> <SELECT onchange="tblfilter('ex1',this.options[this.selectedIndex].value);"> <OPTION value="" selected>すべて</OPTION> <OPTION value=海>海の動物</OPTION> <OPTION value=陸>陸の動物</OPTION> <OPTION value=お気に入り>お気に入り</OPTION> </SELECT></FORM> <TABLE id=ex1> <TR title=海><TD><input type=checkbox value=1 title='追加'>1</TD><TD>いか</TD></TR> <TR title=陸,鳴く><TD><input type=checkbox value=2 title='追加'>2</TD><TD>いぬ</TD></TR> <TR title=海,鳴く><TD><input type=checkbox value=6 title='追加'>6</TD><TD>とど</TD></TR> </TABLE> </BODY></HTML> そして http://mugi.cc/js/030520.htm 上記のURLのようにcheckしたのをJavaScriptで保存し、 最終的にはselectからお気に入りを選んだ際、 checkしたものだけ表示するようにしたいと考えております。 お手数ですが、どなた様かご教授願いますようお願い致します。
- 締切済み
- JavaScript
- テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。 なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- HTML
- javascript 計算フォーム
見積フォームを作っているのですがjavascript に精通してないので詳しい方教えて頂けますか。 下記のようにnew Arrayで値を取得してますが３つ目の項目”メーカー名”はどれを選んでも金額は同じなので簡単に記述出来ないでしょうか？ 合計金額取得後ＣＧＩに送信したいので項目名は必要です。 いろいろ検索してみましたが私のスキルでは解決できないのでよろしくお願いします。 ちなみにjavascriptの 計算フォームは部品の共存（セレクトメニューとラジオボタンなど）は出来ませんよね。 ======================================== <html> <head> </head> <script language="javascript"> <!-- n_table1 = new Array(30000,20000,18000,9000); n_table2 = new Array(8000,14800,6980); n_table3 = new Array(3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex]; total = total + n_table2[document.form1.koumoku2.selectedIndex]; total = total + n_table3[document.form1.koumoku3.selectedIndex]; outStr = "合計 : ￥" + total; document.form2.outbox.value=outStr; } // --> </script> <body> <center> <br> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#FFA828"> <tr> <td>商品 Ａ</td> <td> <select name="koumoku1"> <option>Pentium <option>Celeron <option>Athlon <option>Duron </select> </td> </tr> <tr> <td>商品 Ｂ</td> <td> <select name="koumoku2"> <option>F2MX200 <option>LE Ultra <option>Kyro </select> </td> </tr> <tr> <td>メーカー名</td> <td> <select name="koumoku3"> <option>Ａ社 <option>Ｂ社 <option>Ｃ社 <option>Ｄ社 <option>Ｅ社 <option>Ｆ社 <option>Ｇ社 <option>Ｈ社 <option>Ｉ社 <option>Ｊ社 <option>Ｋ社 <option>Ｌ社 </select> </td> </tr> </table> <p> <input type="button" value="計算する" onClick="keisan(this.form)"> </form> <p><br> <form name="form2"> <TEXTAREA NAME="outbox" rows=1 cols=36 wrap="soft"> 計算結果表示 </textarea> </form> </center> </body> </html> ========================================
- ベストアンサー
- JavaScript
お礼
早速ありがとうございました． そういう問題でしたか． 試したらうまくいきました． 大変助かりました．