ページ内リンクでの画面切れについて

[新着] Webテンプレートを仮オープンしました

0   名前： real ： 2006/08/25（金） 10:37  ID:Xg5OvUg7
現在DreamWeaverを使用し、XHTML 1.0 TransitionalでHPを作成中なのですが、アンカーポイントやidタグを使ってページ内リンクを作ると、その場所へは飛ぶのですが、スクロールバーが一番上にきていまいその上にあるはずの内容が表示されません。
原因がわかる方、教えてくださると助かります。お願いします。
1   名前： 木目 ◆a20iQ0Y76t ： 2006/08/25（金） 10:37  ID:eem58ixn
＞その上にあるはずの内容が表示されません。

というのは正常な動作では？？

＞スクロールバーが一番上にきていまい

というのはページ全体の最上段でしょうか。
2   名前： real ： 2006/08/25（金） 10:37  ID:MH6eGdBJ
木目様

以前作った時にはページの途中に飛んだ場合でも、スクロールバーを上げていけばページの上のほうに戻ることが出来たのですが、今回はページ内リンクで飛んだ場所自体がそのページの最上段になってしまい、それに合わせてスクロールバーも一番上にきてしまいます。
ですので、本来その上にあったはずの記事が閲覧できなくなってしまうのです。

こんな説明でお分かりいただけたでしょうか？
なにぶん専門用語は勉強中なもので、表現が稚拙ですみません。
3   名前： Pid ： 2006/08/25（金） 10:37  ID:.vBytNbs
っ http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
っ http://jigsaw.w3.org/css-validator/

もしチェック・修正しても解決しなければ，現象が再現する最小限のソースをご自分で作って，原因の所在を絞り込んで下さい。そして，そのソースと，現象が発生する環境を，ここに書き込んで下さい。

overflow が怪しそうですが，現物を見ないことには何とも判断しかねます。
4   名前： real ： 2006/08/25（金） 10:37  ID:3LH.1DsO
Pid様

ご教授ありがとうございます。
早速チェックしてみたところ、あまりにも多くのエラーが出て驚きました。
問題の箇所は、ご指摘のとおりoverflowにあるらしく、下記のCSSの部分をいろいろ変えてはみたのですが、別のスクロールバーが出現したり、背景の画像が異常に伸びたりしてしまいます。

#wrap {
width: 800px;
margin: 0em auto;
padding: 0em;
background-color: rgb(255,255,255);
border-left: solid 1px rgb(150,150,150);
border-right: solid 1px rgb(150,150,150);
}

/*** Correction for non-IE browsers ***/
#wrap {
overflow: hidden;
}

/*** Correction for IE 5.01 ***/
#wrap {
/* float: left; */
float: none;
}


一応１ページだけアップしてみましので、よろしければご覧になってください。
ページ内リンクの問題が残ったままの状態です。
5   名前： real ： 2006/08/25（金） 10:37  ID:3LH.1DsO
すいません。
ページのリンクを貼り忘れてました。
こちらです↓
http://www.balancefactory.net/aroma.html
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/25（金） 10:37  ［URL］  ID:O5hEMlpW
> 現象が再現する最小限のソースをご自分で作って
> 現象が再現する最小限のソースをご自分で作って
> 現象が再現する最小限のソースをご自分で作って
7   名前： real ： 2006/08/25（金） 10:37  ID:MH6eGdBJ
カヅサツ様
ご指摘ありがとうございます。
> 現象が再現する最小限のソース
が、どうもまだうまく作れません。
なんとか別の方法で工夫したいと思います。
ありがとうございました。
8   名前： Pid ： 2006/08/25（金） 10:37  ID:GN4gjesz
overflow: hidden; を消した後の，とんでもない量の余白に気付けば，最小限のソースを作るのはそう難しい作業ではなかったんじゃないかと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>テスト</title>
    <style type="text/css">

#wrap {
  overflow: hidden;
  width: 800px;  /* IE は width 指定がないと現象が発生しない */
}

#left-column {
  border: 1px solid blue;
  float: left;
  width: 165px;
}

#middle-column {
  border: 1px solid red;
  float: left;
  width: 570px;
  
  /* MacIE5 用のフィルタ？ */
  padding-bottom: 30000px;
  margin-bottom: -30000px;
}

#footer {
  border: 1px solid green;
  clear: both;
}

    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="left-column">
        <ul>
          <li><a href="#aromatoha">アロマテラピーとは</a></li>
        </ul>
      </div>
      
      <div id="middle-column">
        <p style="height: 1000px; ">↓↓隙間を大きく取ってます↓↓</p>
        
        <h2 id="aromatoha">アロマテラピーとは</h2>
        
        <p>アロマテラピーとは，……。</p>
      </div>
      
      <div id="footer">
        <address>Copyright 2006</address>
      </div>
    </div>
  </body>
</html>


CSS に関してはオリジナルから抜き出しました（border はこちらで入れました）。マークアップは適当に作成しています（個人的に id 属性の濫用は避けるべきと思いますが，ともかく）。

さて，MacIE5 用のフィルタと称して，万単位の margin/padding-bottom を指定している箇所が複数あります。そして，他のブラウザでは，生じたスクロールバーを overflow: hidden; で消して「誤魔化している」のが，今回の現象の原因です。

MacIE5 に関するスクロールバー制御絡みの工夫だと思うのですが，少なくとも今回のファイルでは全く上手くいってません。real さんの方でオリジナルソースを編集なさいましたか（あるいは，用途の違う CSS だったりしませんか）。

私としては，上記の工夫の意図が不明な以上，overflow: hidden と万単位の margin/paddin-bottom 指定を止めれ，としか言えません。

この工夫に関して，ご存知の方は教えて下さい m(_ _)m。
9   名前： real ： 2006/08/25（金） 10:37  ID:CSSSgQJw
Pid様

ソースを作ってくださったうえに、ご説明までしていただきありがとうございました。

ご指摘のとおり、オリジナルのソースを編集しながら作っています。
ですから、最小限のソースを一から作る技術がありませんでした。（チャレンジはしてみたのですが・・・）
お手数おかけしましたm(__)m

margin/paddin-bottomを削除したところ上手くいきました。
この場合、MacIE5では上手く見れなくなるのかわかりませんが、ひとまずはこれで作っていきたいと思います。

本当に助かりました。ありがとうございます。
一覧へ戻る