- ベストアンサー
名付けたフラグメントにリンクする
- ページの一番下にヘージトップに戻るボタンを作り、ヘージトップに戻るようにしたいのですが、Firefox・Opera・Safariでは飛べませんでした。
- 互換性にも配慮して、a要素に同じ値のidとnameを併記しアンカーとしましたができませんでした。
- どなたかご存知の方がいらっしゃいましたら教えて下さい。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
>一応<body id="TOP_POINT">にするとできることを思い出したのですが、以前この方法で、何か不都合なことがあった気がするのですが、思い出せません。 多分それしかなさそう。
お礼
ですよね。 色々とありがとうございました。
- Suzi
- ベストアンサー率38% (130/334)
関連するQ&A
- 親ページからインラインフレーム内の<a name="～">リンクへ飛ばしたときのIEの動きについて
例えば、IEで <html> <head><title>index.html</title> </head> <body><center> <p style="margin: 100px auto 50px auto">サンプル</p> <p><a href="a.html#a" target="frame">リンク</a></p> <iframe src="a.html" width="640" height="500" name="frame" style="margin-bottom: 400px"> </iframe></center> </body> </html> というソースのindex.htmlに、 <html><head><title>インフレーム・a.html</title></head> <body><p style="margin-top: 500px">余白</p> <p><a name="a">NAME A</a></p> <p style="margin-top: 500px">余白</p> </body></html> というソースのa.htmlというファイルをインラインフレームで読み込み、 index.htmlの「<p><a href="a.html#a" target="frame">リンク</a></p>」をクリックした場合、 インラインフレーム内のa.htmlの「<p><a name="a">NAME A</a></p>」がブラウザの一番上に表示されるよう、 index.htmlのページ全体が上に動いてしまいますよね。 これを、（同じものをOperaで動作させたときのように、） index.htmlのページ全体ではなくインラインフレーム内のa.htmlだけが 動くように表示させたいのですが、何かいい解決策はあるでしょうか？ 最初はIEのバグかと思ったのですが、FirefoxでもMozillaでも 同様なので、Operaの解釈のほうが特殊なのかもしれませんが…。
- ベストアンサー
- HTML
- ページ内リンクについて
ページ内リンクについて質問です。 以下のプログラム内容で、実行するとＴopにはいくのですが、 微妙に少しだけTopより下の位置にジャンプします。 完全にTopにいきません・・・ なぜでしょうか？ リンク到着地点のタグの位置が不適切なんでしょうか？ 色々挑戦したんですが、どこがいけないのかわかりません。 回答よろしくお願いします。 【HTML】 <body id="center"> <a name="container" id="container"></a> <div id="rogo"> 会社のロゴ </div> <div class="UD-msg"> 本文 <a href="#container"><img src="images/page_top.GIF" alt="Page Top" title="Page Top" width="58px" height="12.5px"></a> </div> </body> 【css】 #center{ width: 770px; margin-top: 0px; margin-left: auto; margin-right: auto; } #rogo{ margin-top: 6.6px; } .UD-msg{ margin-top: 20px; margin-left: 30px; }
- ベストアンサー
- HTML
- ブロックレベル要素内ブロックレベル要素のmargin-topが効かない
<html><head><style> *{ margin:0; paddgin:0; border:none; } div#wrap{ background:#BBB; width:600px; height:900px; margin:30px auto; } div#header{ background:#999; width:150px; height:60px; margin:30px; } </style></head><body> <div id="wrap"> <div id="header"> </div> </div> </body></html> 例えばこの用な場合で、divの中にdivが入っている場合など…中に入っているdiv要素のmargin-topが効きません。原因がよくわらないのですが、どのような条件の時にmargin-topは効かなくなるのでしょうか？また解決策はどのようなものがあるでしょうか？このようなケースでmargin-topが効かなくなったのが二度目でどうしても気になったので質問させていただきました。よろしくお願いします。
- ベストアンサー
- HTML
- HP制作中です。
HP制作中です。 ページの最上部に高さ150pxの帯を左右いっぱいに表示させ、内容は左右800px幅に表示させたページを作りたいのですが、bodyに高さ150pxの画像をX軸のみリピートさせ、内容のheadセレクタにも同じ画像を表示させた場合に、IE7は問題無いようですが、Firefoxだと内部セレクタの上に余白ができて画像がずれてしまいます。 htmlのhead内に<style type="text/css"> <!-- body {margin-top: 0px;} --> </style> を入れてみましたが解決しません。 宜しくお願いします。 body { color: #666666; font-size: 75%; background-image: url(image/head.png); background-repeat: repeat-x; margin-top: 0px; padding-top: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { height: auto; width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; padding-top: 0px; } #header { height: 160px; margin-top: 0px; padding-top: 0px; background-image: url(image/head.png); background-repeat: repeat-x; }
- ベストアンサー
- HTML
- スクロールでもついてくる、TOPへ戻るリンク
スクロールしても一緒についてくる、 ページのTOPへ戻るというリンクをつけたいのですが、 IEの環境でうまく動作しません。 （クロムやfirefoxではうまく動きました。） イメージとしては、下記のページにあるようなリンクです。 http://www.tokyometro.jp/index.html 何が原因なのか分からないです。 ■HTMLファイル <!-- /pagetopComp --> <div id="pagetopComp"> <p><a href='#' onclick='backToTop(); return false'><img src="/s/top/images/up.png" alt="ページトップへ" width="36" height="120"/></a></p> </div> <!-- /pagetopComp --> ■CSSファイル #pagetopComp { width:36px; height:120px; position:fixed; bottom:50px; right:0; z-index:999; } * html #pagetopComp { position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); margin-left:expression(0 - parseInt(this.offsetWidth / 2) + (document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft) + 'px'); } どこを修正すべきなのかとか、こういう方法がいいよなど 何でもかまいませんのでご教授ください。 お願いします。
- ベストアンサー
- HTML
- WindowsのIEで、スタイルシートのfloatがずれてしまいます
スタイルシートの「float」についてなんですが、 ------------------------------------------------------------------- <html> <head> <title>メニューテスト</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #menu{ float: left; width: 170px; margin-top: 0px; margin-left: 8px; } --> </style> </head> <body> <div id="menu">あいうえお</div> </body> </html> ------------------------------------------------------------------- 上記のようにすると、WindowsのIE5以降で見たとき、 「あいうえお」のマージンが8pxと指定してあるにもかかわらず、16pxほど空いてしまいます。 「float」を外せば正常に表示されます。 他のブラウザでは正常に表示されますので、Win IEのみの現象だと思うのですが 何か良い解決方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- ウインドウを小さくするとbody上部ボーダが切れる
ブラウザウインドウを小さくし（スクロールバーが表示された状態） スクロールバーを右に動かすと、bodyに設定してあるboder-topのボーダーが途中で切れます。 ウインドウサイズを小さくしてもページ上部のボーダーは常に両端までくる形にしたいです。 ＩＥ８でもFirefox3.6.12でも同じです。 サイトボックスとして、 <div id="site_box"> </div> でサイトＢＯＸは900pxとしており、 ＣＳＳで #site_box{ width: 900px; margin-right: auto; margin-left: auto; } として中央寄せをしています。（body自体はそのまま） ************XHTML************** <body> <div id="site_box"> <div id="header"> <div id="header_msg"><p>ページトップコメント</p></div> <div><img src="img/logo.gif" width="250" height="52" /></div> </div> <div id="main"> <div> <p>テスト</p> <p>テスト</p> <p>テスト</p> <p>テスト</p> </div> </div> <div id="footer"> <div class="copy"><p>Copyright © ******* All Rights Reserved.</p></div> </div> </div> </body> </html> *********ＣＳＳ**************** *{ margin:0px; padding:0px; } body{ border-top-width: 3px; border-top-style: solid; border-top-color: #0066FF; } #site_box{ width: 900px; margin-right: auto; margin-left: auto; } #header{ width: 900px; } #main{ margin-top: 10px; height: 600px; } #footer{ } /*** ヘッダー部 ***/ #header_msg{ text-align: right; margin-top: 10px; } .copy p{ text-align: center; } よろしくお願いします。
- ベストアンサー
- HTML
- スムーズにスクロールできるスプリクトが作動しません
初めて質問させていただきます。 ページ内にスタイルシートを使ってスクロールしても動かない案内板のようなボックスを作り、その中でページの上部に戻る際、スルスルとスクロールするjavascriptを入れたいのですが、うまく作動しません。 <script type="text/javascript" src="○○.js" charset="utf-8"></script> <STYLE type="text/css"> <!-- html{ height:100%; overflow:hidden; } body{ height:100%; margin:0px auto; } #sub{ width:100px; position:absolute; bottom: 0px; right: 0px; z-index:100; } div#main{ width:100%; height:100%; overflow:auto; } --> </STYLE> </HEAD> <BODY> <DIV id="sub"><A href="○○">あいうえお</A><BR><A href="○○">かきくけこ</A><BR><a href="#top">上へ</A></DIV> <DIV id="main"> <A name="top"></A><BR> ・・・略 </div> </body> 普通のbody内でリンクを指定すると、問題なくスプリクトが作動します。 なぜ、div内では作動しないのでしょうか？ いろいろ調べてみましたが、どうしても分からず、こうして質問させていただきました。 原因がわかる方がいらっしゃいましたら、どうか教えてくださいますようお願いいたします。
- ベストアンサー
- JavaScript
- ページ内リンクがうまくいきません
ページ内リンクがうまくいきません。 どこか間違っているのでしょうか。 アドバイスよろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ホームページ</title> <style> p{ color:red;} </style> </head> <body> <p>こんばんわ！</p> <p>こんちは！</p> <p><a href="#01">ジャンプ</a></p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> <p id="#01">ここ</p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> <p>こんちは！</p> </body> </html>
- ベストアンサー
- HTML
- ツリー型の目次作成
ツリー型の目次を作成しているのですが、IEでは動作するのですが、ネスケではエラーになってしまいます。 うまく動作させる方法はないでしょうか？ 下記がソースです。 <html> <head> <title>目次</title> <style type="text/css"> div.h_ {margin-left:0px;margin-top:6px;} div.h {margin-left:28px;margin-top:6px;} div.sy_ {margin-left:28px;margin-top:6px;} div.sy {margin-left:56px;margin-top:6px;} div.st_ {margin-left:56px;margin-top:6px;} div.st {margin-left:84px;margin-top:6px;} div.k_ {margin-left:84px;margin-top:6px;} div.k {margin-left:112px;margin-top:6px;} } </style> <script language="JavaScript"> <!--// function displayMokuji(obj, img) { alert("displayMokuji"); if (!obj || !img) alert("bbb"); return; } if (obj.style.display == "none") { obj.style.display =""; img.src ="./open.gif"; } else { obj.style.display ="none"; img.src = "./close.gif"; } return; } //--> </script> </head> <body text="#000000" link="#0000ff" alink="#ff0000" vlink="#0000ff"> <div class="h_"> <a onclick="javascript:displayMokuji(hi0100000000, ii01000000);" href="#"> <img id="ii01000000" src="./close.gif" border="0"></a> <b>第１編 </b> </div> <div id="bbb" style="display:none"> <div class="sy"> <b>第１章</b> </div> <div class="sy"> <b>第２章</b> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
補足
早々のご回答ありがとうございます。 「わざわざフラグメントの内容を隠さなければならない,場合とはどのような状況なのか？」の件ですが、記入しそこなったのですが、bodyのスタイルシートにpadding:5px;と記載しており、ページの上部に5pxの空白があります。正確には5px内側に入ります。(みっちり上につけないため) その為、body内のロゴやヘッダ部分などにidを付け飛ばすと微妙ではありますが、完全に上に行きません。 そこで、<p style="display:none" id="TOP_POINT">★ページのトップです★</p>とすることにより、1番上までいくことができました。しかし、標記の問題が出てきてしまったのです。 ・・・やっぱりdisplay:none;が適用された要素にはIE以外飛べないですか。 D2・・・私が行ったことと同じ役割。 D3・・・max-widthを使うと今度はIEに対応してなくなってしまう。 D4・・・visibility:hidden;で非表示にした場合にも、ボックス自体がなくなってしまうわけではなく空白ができてしまう。 D5・・・Firefoxにて、ページがスクロールしなくても表示できる場合、スクロールバーが出ず、テンプレートを固定センター寄せにすると、センターの位置がずれる現象を解決するために、overflow:scroll;を使用しているので、これも使えなそうです。 #・・・これのみの場合は一番理想的になるのですが、構文チェックを行うと、<A> のアンカー名が空です。と警告が出てしまう。 一応<body id="TOP_POINT">にするとできることを思い出したのですが、以前この方法で、何か不都合なことがあった気がするのですが、思い出せません。