![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
現在ホームページを作成していて、メニューバーを横に表示して、メニューの項目をクリックするとその横にあるコンテンツのbox内でアンカーを配置している部分までスクロールをして表示をするという仕組みで作成していました。
しかし、いざ完成しアップロードをして確認してみると、chrome上ではメニュー項目をクリックしてアンカーの位置まで移動して正しく表示されるのですが、IEやfirefoxではアンカーの位置までは正しく表記されているのですが、そのアンカーの位置より上部のコンテンツがスクロールバーより消えてしまいます。
このような場合を解決して全てのブラウザで見ても正しく表示される方法などあるのでしょうか?
作成に使用しているのはホームページビルダー20 クラシックです。
No.6ベストアンサー
- 回答日時:
CSSファイル内に、
――――――――――――――――――
#sub{
box-sizing: border-box;
overflow:hidden;
float:left;
width:30%;
background:#000000;
margin-bottom:-32768px;
padding-bottom:32768px;
}
――――――――――――――――――
という記述があると思うのですが、それの、
――――――――――――――――――
margin-bottom:-32768px;
padding-bottom:32768px;
――――――――――――――――――
という部分が原因かも知れません。
WEB検索してみましたら、これは、「メインコンテンツとサイドバーの高さを揃えるスタイル」のようです。
製作者が、両者の高さが違うと見栄えが悪いので、このスタイルを使ったのかも知れません。
一度、そちらの実際のデザインで、その部分を削除して検証してみてください。
ありがとうございます!
cssの#mainと#subのmargin-bottomとpadding-bottomの項目を削除してみたところIEでもアンカーへ移動後の上部へのスクロールが可能になりました!
他の回答者様もご回答ありがとうございました。
No.5
- 回答日時:
html→cssかぁ・・・
こればっかりは一つ一つの設定を試しながら確認するしか無いかもしれませんね。
一度に全てを置き換えないで、少しづつcssに変更していってどこが間違いか発見する方法しか思いつかないです。
すみません。
No.3
- 回答日時:
[ SCHEDULE ]のところを見ましたが、なるほど実物をみるとよく分かります。
ヘッダが2重になっていて、スクロールしたら上のヘッダの下に隠れてしまうんですね。
少し調べてみます。
No.2
- 回答日時:
当該のHTMLとCSS内の、今回の件とは無関係な部分を削って、出来る限りシンプルな記述にし、それを、こちらの捕捉に貼り付けられるか、あるいは、任意のホームページスペースにアップロードして、そのリンクを補足されてはいかがでしょうか。
そうすれば、有効な回答が付くかも知れません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Windows 10 「新規作成」メニューが表示されません 2 2023/04/07 14:56
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Visual Basic(VBA) 【ExcelVBA】動的にボタン、ボタン名を生成できますか? 7 2022/04/08 12:54
- その他(ソフトウェア) Ghosteryのプライバシー 広告ブロッカーのトラブルについて質問です。 1 2023/05/03 21:09
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- その他(Microsoft Office) Microsoft Edgeの「ニュースと関心事項」についてお聞きします。 3 2023/05/22 12:08
- Chrome(クローム) Webサイトの表示崩れの原因と対策 1 2022/08/01 23:16
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- Excel(エクセル) エクセルの散布図で新たに入力した値のデータラベルが空欄になる現象 1 2022/04/26 09:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブWeb 右側の表示が...
-
テーブルセル余白(例えば左側...
-
borderの太さを1px以下に見せ...
-
L字みたいな記号の表示
-
WordPressに関しまして。#ハッ...
-
シーサーブログのヘッダー画像...
-
PDFファイルが破損していると表...
-
Powerpointに貼った画像のサイ...
-
ピクチャーボックスの大きさに...
-
複数の画像を1枚にしたファイ...
-
HTMLで、ホームページが作れる...
-
「社外秘」のイラスト、画像素...
-
ブログにバナーを貼り付けたい
-
HTMLタグで [ のような罫線を引...
-
Microsoft Powerpointのクリッ...
-
fc2に画像がアップロードできない
-
HTMLタグを使った画像のアップ...
-
教えてください。困ってます。D...
-
CSOランチャーがおかしい(カウ...
-
301リダイレクトを使用してURLw...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
borderの太さを1px以下に見せ...
-
縦ボーダーの長さ変更方法
-
レスポンシブWeb 右側の表示が...
-
テキストボックスが選択できない
-
border-widthの太さ指定について
-
ホームページ作成後、別のブラ...
-
[CSS]エラーの原因
-
L字みたいな記号の表示
-
PDFファイルが破損していると表...
-
ピクチャーボックスの大きさに...
-
グーグルのアイコンを操作して...
-
シーサーブログのヘッダー画像...
-
画像
-
iPhoneで HTMLファイルを閲覧
-
ホームページビルダーで文字の...
-
ExcelVBAで挿入画像の縦横サイ...
-
画像と画像の間のスペースはど...
-
一行は何ピクセル?
-
複数の画像を1枚にしたファイ...
おすすめ情報
HTMLとCSSを利用しています、ネットでフリーのテンプレートを見つけてそちらをいじって作成しておりました。
http://22.gigafile.nu/efa11bf0f930bab3f4d8c0ac2e …
こちらに本内容の物のhtml、cssをアップロードしていますのでこちらから見ていただけると幸いです。
すいません、当方まだhtml、cssになれていなくてそこまでわからない状態です…
ご丁寧に教えていただいているのにすいません・・・
先程いろいろ試していたのですが、
一度別の正常のテンプレートに先程のhtmlだけをソースに書き込み、ブラウザで確認してみたところ、ieでもChromeでも正常に同ページ内のアンカー位置へジャンプした後、アンカー上部にスクロールできました。
cssを適応させるとアンカー上部へスクロールできない状態でした。