- ベストアンサー
＜ｔｄ＞の中を移動する、外部JavaScript書き出しのdocument.write
EURの回答
- EUR
- ベストアンサー率61% (29/47)
フッターにかぶるの原因は、 (画面の高さ - フッターの高さ) < メニューDIVの高さ となってしまっているからですね。 テーブルを一番したまでスクロールした場合（フッターもすべて見えている状態）、メニューや営業ツールが表示される部分の高さがメニューのDIVの高さよりも小さいため、DIVがフッターに乗っかってしまっている状態です。 ちなみにフッターの高さは結構大きいですか？ 正確にいうとフッターの高さと、メニューDIVの高さを足した値が、画面の高さを越えますか？ 超える場合は、見栄えが悪くなりますけど、やはりoverflow: scroll;が必要になるかもしれません。 変更するないようとしては、 １．テーブルの高さを画面の高さにそろえる ２．ヘッダー、フッター、メニュー、営業ツールエリアに、テーブルのセルと同じ幅・高さのDIVを用意する ３．すべてのDIVにoverflow: scroll;を記述し、すべてをスクロールできるようにする。 となります。 さて、No4での質問の回答ですが、 >menu.jsを置く<td></td>の範囲（座標？？）を指定できたりするのでしょうか？ これは、function ChangeMenuHeight() で行っています。 画面の高さから、メニューバー等を考えて100を引いた値をDIVの高さに指定してます。 No3のソースではヘッダーやフッターの幅を考えていなかったため、フッターにかぶってしまいました。 今回示す例では、ヘッダーもしくはフッターの大きいほうを引いています。 引くにあたって、ヘッダー部、フッター部にIDを割り付けました。 ※ヘッダー、フッター、メニューのDIVに背景色をつけています。適当に削除してください。 以下例です。 <HTML> <head> <script type="text/javascript"> function MoveMenu() { if (document.all) { Move = document.body.scrollTop; } else { Move = this.window.pageYOffset; } //スクロール時にメニューのトップを変える document.getElementById("menu").style.top = Move; } //↓メニューの高さ変更を追加↓ function ChangeMenuHeight() { //メニューDIVの高さを決定します HEAD = document.getElementById("HEADER").offsetHeight; FOOT = document.getElementById("FOOTER").offsetHeight; if(document.all){ TBLHeight = document.body.clientHeight - 100; }else if(document.layers){ TBLHeight = window.innerHeight - 100; }else{ TBLHeight = 500; } //ヘッダーとフッターの大きいほうの高さを引く if (HEAD >= FOOT) { TBLHeight = TBLHeight - HEAD; } else { TBLHeight = TBLHeight - FOOT; } if (TBLHeight < 100) { TBLHeight = 100; } document.getElementById("menu").style.height = TBLHeight; } //↑メニューの高さ変更を追加↑ </script> </head> <!--ロード時と画面サイズ変更時にメニューの高さを変えるように変更--> <body onScroll="MoveMenu()" onLoad="ChangeMenuHeight()" onResize="ChangeMenuHeight()"> <table width="750" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <!--ヘッダーにIDをふりました--> <td id="HEADER" colspan="3" align="center" valign="top"> ヘッダーをJavascriptで呼んできてます。 </td> </tr> <tr> <td align="left" valign="top" width="230"> <!--相対位置でDIVを定義します--> <div id="menu" style="top:0px; left:0px; position:relative; background-color: #ff0000;"> メニューをJavascriptで呼んできてます。 どっこい多分ここで呼ぶmenu.jsのテーブルが長いのか、 スクロールするとなぜか底なし沼になります… </div> </td> <td width="10"></td> <td width="505" height="10000"> ここにローングな営業ツールが入ってます。 </td> </tr> <tr> <!--フッターにIDを振りました--> <td id="FOOTER" colspan="3" align="center" valign="top" bgcolor="#0000ff"> フッターをJavascriptで呼んできてます。 </td> </tr> </table> </body> </HTML>
関連するQ&A
- javascriptで文字を移動後、プルダウン表示させたい。
(1)移動処理 http://www.openspc2.org/JavaScript/Ajax/Effect/Rico/002/index.html (2)上から内容を表示 http://www.openspc2.org/JavaScript/Ajax/Effect/script.aculo.us/004/index.html (1)→(2)の処理の順番動かそうと思い、javascriptを組んでみたのですが、動きません。 new Rico.Effect.Position("movilisez", 400,300, 100, 20);を コメントアウトすると、(2)の処理は動いてくれますが、 コメントを外すと動きません。 原因を教えていただけますでしょうか？ 環境は以下です。 OS:VISTAHomepremium ブラウザ:IE7 --------------------- function toPoint() { new Rico.Effect.Position("movilisez", 400,300, 100, 20); execEffect(); } function execEffect() { document.getElementById("contents").style.visibility = "visible" new Effect.BlindDown($("contents")); } --------------------- --------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="Style_Index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="scripts/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="scripts/rico.js"></script> <script type="text/javascript" src="scripts/BlindDown.js"></script> <title>TestPage</title> </head> <body> <div align="center"> <p></p><div id="Hedder" align="center"><table width="800px" cellspacing="0"> <tr> <td colspan="2" rowspan="2" align="left"><img src="" alt="" name="movilisez" width="200" height="80" id="movilisez" onclick="toPoint()" /></td> </tr> </table></div> <div id="contents"> <div id="menu" align="center"> メニュー </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- タグのかけら
HTMLでテーブルを真ん中に表示したい場合、 table align="center" （簡略してます） と入力しますが、左によせる場合 centerをleft に変更するか、 align 全体を削除するかと思います。 ただ都合でしょっちゅう移動させるので、わたしの場合 " の部分だけをカットして残りはそのままにします。 その他の場合でも面倒で < > などをそのままにしたりもします。 特に今は問題ないのですが、こういうタグのかけらみたいなものはやはりあとでなにかしら影響がでるものでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- JavaScriptの外部ファイル化とSSIについて
いつもお世話になっております。 親切で丁寧なご回答に心から感謝いたします。 今回、JavaScriptを外部ファイルにし、 更新等の時間を大幅に削減しようと思っておりますが、 上手くいかないためこちらに質問させていただきました。 当方のホームページではメニュー部とタイトル部をSSIを利用し、 インクルードさせ、表示しておりますが、JavaScriptを外部ファイルにすると、 SSIでインクールドさせている部分だけ表示されなくなってしまいます。 Firefoxのソース表示でソースをみると、インクルードさせている部分は、 ソースにはありましたが、その部分だけHTML文書ではなく ただの文書（黒字）になってしまっております。 ただ、indexページだけはなぜか正常に表示され、 メニューから移動した際に、インクルードしたものが表示されない状態です。 メニュー部は外部ファイル化したJavaScriptでツリーメニューになっています。 何卒、宜しくお願いいたします。 ソースは下記のとおりです。 <HEAD> <META> <LINK href="detarame2006.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="script.js"> </HEAD> 省略 <TR> <!--#include file="top/top.html" --> </TR> <TR> 省略 </TR> <!--#include file="menu/menu.html" -->
- ベストアンサー
- JavaScript
- テーブルの位置
テーブルを上下に２つ表示させたいのですが、うまく表示できません。 <table border="0" cellspacing="0" align="center"> ・・・ </table> <table border="0" cellspacing="0" align="center"> ・・・ </table> としていたときは、ちゃんと上下に２つ表示されていたのですが、 <table border="0" cellspacing="0" align="left"> ・・・ </table> <table border="0" cellspacing="0" align="center"> ・・・ </table> にすると、左右に２つ表示されてしまいます。 どうしてでしょうか？
- ベストアンサー
- HTML
- 外部ＪａｖａＳｃｒｉｐｔでのdocument.writeについて
今、JavaScriptを使ってＨＰを作ろうと思っています。 そこで、外部ファイルとしてJavaScriptを作り、ＨＴＭＬ内でsrcを使って読み込んでいます。そのときに問題が発生しているのですが、外部ファイルでdocument.writeを使うと処理が戻ってきません。 例） .... xxxx="テストJavaScript"; document.write(xxxx); .... ちなみに、ＩＥで実行した場合はきちんと表示し、NetScapeで実行した場合にずっと通信中になってしまいます。 これはNetScapeの仕様なのでしょうか。 分かりにくい説明で申し訳ありませんが、どなたかご回答お願い致します。
- ベストアンサー
- JavaScript
- tableが崩れる件
フレームにしたくないのでtableですべて作っていますが メニュー（左）と本文（右）の上下がずれてしまいます。どうしたらいいでしょうか。たとえば本文が長くなりすぎるとメニューの上の部分にその分隙間ができてしまいます。アドバイスよろしくお願いします。
- ベストアンサー
- HTML
- CSS初心者 コンテンツ高さに合わせたメニュー領域の背景色
CSS初心者です。 Win IE6 環境で制作しています。 「メニュー」部分（右側）と「コンテンツ部分」（左側）とに分けて２段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。 CSSは .contents { width:770px; text-align:center; } （全体のコンテンツ領域） .contents-left { width:550px; float: left; text-align:center; } （←コンテンツ部分） .contents-right { width:200px; vertical-align:100%; } (←メニュー部分） .footer { width:770px; text-align:center; clear: both; } （フッター） とし、 メニューを囲んでいるDiv要素には .menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; } としています。 いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。 教えてください。よろしくお願いします。
- ベストアンサー
- CSS
- 画像の上下中央固定について
今、ホームページをメモ帳で作っています。 大きな画像１枚だけを、１つのページにドンと置いているんですが その画像を、どんなに画面の大きさが変わっても 常に上下左右の中央にもってきたいんです。 左右は、<center>ではさんだり、テーブルを使ったりして できたんですが、どうしても上下だけができません。 どこかのホームページで、テーブルを使った場合 ALIGN="*"と同じように VALIGN="*"でcenterと指定すればできる と書いてあったのですが、私はできませんでした。 どうすれば、上下の中央に持ってこれるのかご存知の方、教えてください。 お願いします。
- ベストアンサー
- HTML
- ホームページのテーブルをWordに貼り付けると左にずれる？
下記スレッドで解決しなかったので、こちらに移動してきました。 マルチスレッドを避けるため、下記スレッドは締め切ります。 http://oshiete1.goo.ne.jp/qa3829625.html 以下のコードのHTMLで作られたテーブルをブラウザーに表示→コピー→Wordに貼り付けると、テーブルがWordの文字列開始位置よりも左側にづれてペーストされるのですが、どのようにして回避できるのでしょうか？ コード： <table width="550" border="1" cellspacing="0" cellpadding="40"> <tr> <td width="466" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="118"> 表見出し行 </td> <td width="266"> データ </td> </tr> </table> どうやら、テーブルのcellpaddingが関係しているようで、cellpaddingの値を以下のコードのように小さくすると、テーブルをWordに貼り付けたときに文字列開始位置よりも左にずれる割合は小さくなります。 コード： <table width="550" border="1" cellspacing="0" cellpadding="5"> <tr> <td width="536" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="188"> 表見出し行 </td> <td width="336"> データ </td> </tr> </table> ただ、それでも少し左にずれることには変わりませんし、cellpaddingの値が大きなテーブルをWordに貼り付けるときの回避策とはなりません。 どのようにしたら、cellpaddingの値が０ではないホームページのテーブルをブラウザーからコピーしWordに貼り付けたとき、Wordの文字列開始位置より左にずれないようにできるのでしょうか？ >Word上で、コピペされた表をドラッグして好きな位置に移動 上記のようなご提案もありましたが、回数がすごく多いため単にコピペで行ないたいのです。 よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
- Firefoxだと無効なのかなあ…
自分で作ったページなんですが、スタイルシートで、 div{text-align:center;} と指定してからdivタグでセンタリングしたいところをはさんでいます。 IEで見てみると文章も画像もテーブルもきれいに全部センタリングされてるのですが、Firefoxで見てみるとテーブルだけ左に寄ってしまいます。 やっぱりきちんと <table align="center"> って指定しておかないとだめでしょうか？
- ベストアンサー
- ブラウザ
お礼
EURさん！有難うございますっっ…TT > フッターにかぶるの原因は、 > (画面の高さ - フッターの高さ) < メニューDIVの高さ > となってしまっているからですね。 アー…です。ですです。なってます… > テーブルを一番したまでスクロールした場合（フッターもすべて見えている状態）、メニューや営業ツールが表示される部分の高さがメニューのDIVの高さよりも小さいため、DIVがフッターに乗っかってしまっている状態です。 アァーー…なるほど…納得です…。と、言いますかこうなったら 使い勝手云々以前の問題ですよね…。ゴホゴホ…。 > ちなみにフッターの高さは結構大きいですか？ > 正確にいうとフッターの高さと、メニューDIVの高さを足した値が、画面の高さを越えますか？ フッター自体は35pxくらいのしょぼくれたものなのですが menu.js自体のテーブルの長さは650pxほどあります…。 現状私のモニタだと問題なく見れるはずなのですが、 もっと小さい解像度のユーザの場合、満開で見えなくなりますよね… > 超える場合は、見栄えが悪くなりますけど、やはりoverflow: scroll;が必要になるかもしれません。 ふむむ…なるほど深く納得です。 > 今回示す例では、ヘッダーもしくはフッターの大きいほうを引いています。 > 引くにあたって、ヘッダー部、フッター部にIDを割り付けました。 > ※ヘッダー、フッター、メニューのDIVに背景色をつけています。適当に削除してください。 了解です！有難うございます！！と、勇んで組み込んでみたのですが どうゆうわけだか再び底抜けな状態に…うーむむ… メニューの長さを短くする工夫（ツリーにするとか…）考えてみます！ まずは有難うございます～～！！