-PR-
解決済み

リンク先アンカーの表示位置を下げたい

  • 困ってます
  • 質問No.5146540
  • 閲覧数6594
  • ありがとう数4
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 66% (26/39)

宜しくお願いいたします。

FAQページを作成中で、ページ最上部に質問だけずらり並んでいて、クリックするとリンク先(ページ下部にある回答)に埋め込んだアンカーに飛びます。
しかしCSSで
.header {
height:180px;
}
.main_content {
top:180px;
}
となっているので、飛んだ先の回答がブラウザ最上部、この180pxの部分に表示されて他の要素の裏に隠れてしまいます。リンク先のアンカーを180px下げて表示させるような方法はあるのでしょうか。
質問がわかりにくかったらスミマセン。
通報する
  • 回答数4
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.4
レベル8

ベストアンサー率 69% (23/33)

おおう、なんか思ってたのと全然違ってびっくりしました笑
デザインはいい感じですね。 コードに関しては色々言いたいことがありますが (空要素 br などで閉じていないものがある、など)、書き換え途中っぽいので黙っておきます。

んで肝心の 「リンク先のアンカーを180px下げて表示させるような方法」 ですが、180px 下げているように見せかける手段として、padding-top で 180px 下げる、という方法があります。 そうすると上に 180px の隙間ができてしまいますが、そこは負のマージンで相殺しちゃうと問題無しです。
例えば、#a1 のリンク先を例にすると

<!-- 変更前 -->
<p> <a name="a1"></a> </p>
<h3 class="blue">A.1 1001ツールはどのようにインストールすればよいですか?</h3>

<!-- 変更後 -->
<h3 class="blue" id="a1" style="padding-top: 180px; margin-top: -180px;">A.1 1001ツールはどのようにインストールすればよいですか?</h3>

のように書き換えてみてください。 多分期待通りの動きになると思います。
補足コメント
kasuke2001

お礼率 66% (26/39)

回答有り難うございます。
リンク元は回答頂いたタイトルのすぐ下、リスト化された部分です。

例:□インストール先のフォルダーの場所を変えることは出来ますか?

この部分のhtmlは以下です。

<a href="#a2" class="norm"><li class="square">インストール先のフォルダーの場所を変えることは出来ますか?</li></a>

nobuokaさんのコードを参考に色々試してみたのですが、なにぶん初心者で応用が利かないのでうまくいきませんでした。上記のhtmlに対して再度方法を教えて頂けると有り難いです。宜しくお願いいたします。

ちなみに見よう見まねで試したのは、styleのみを付け加える以下のようなコードです。これでは同じ結果でした(Mac, Firefox)。

<a href="#b1" class="norm" style="padding-top: 180px; margin-top: -180px;"><li class="square">モデル内の何が日影の解析対象となりますか</li></a>
投稿日時 - 2009-07-23 00:37:19
お礼コメント
kasuke2001

お礼率 66% (26/39)

ああ、スミマセン、これはリンク先の話をされていたんですね。
そのものずばりです、出来ました。
何故出来たのかはこれから徐々に勉強させて頂きます。現時点ではこれらのhtmlの働きが今ひとつ分かっておりません。
本当に助かりました。有り難うございました。
投稿日時 - 2009-07-23 01:10:11
-PR-
-PR-

その他の回答 (全3件)

  • 回答No.1

プログラムが面倒なら、フレームを使用してターゲット指定でリンクすれば?CSSでは無理かと。。


  • 回答No.2
レベル8

ベストアンサー率 69% (23/33)

質問がよくわからないんで、できれば作成中の FAQ ページのソースコードを全部示すべきかと思います。
せっかく CSS のコードを書いても、肝心の HTML がどうなってるのかわからなければあまり意味がありませんし。
あと 「リンク先のアンカー」 というのもよくわからないんですが、id 属性で指定した場所 (もしくは a 要素の name 属性で指定した場所) ってことですか?

全体的によくわからないんで見当違いの回答になっているかもしれませんが、「本来の表示位置より 180px 下げて表示する」 ということであれば、CSS の position プロパティを "relative" にして、top プロパティを 180px に指定すれば本来の位置より 180px 下げて表示されますよ。
期待通りかどうかはわかりませんが。

div.sample {
position: relative;
top: 180px
}
補足コメント
kasuke2001

お礼率 66% (26/39)

全くの素人なもので、質問の仕方もよく分からずご迷惑おかけします。
htmlは http://1001shadows.com/test.html にあります。
CSSは以下の通りです。CSSはもう一つありますがそちらは主に文字サイズとかなので今回の質問には関係有りません。
多分ツッコミどころ満載だと思いますが、宜しくお願いいたします。

ーーーーーーーーーーーーーーーー

.overpic {
position:fixed;
top:00px;
left:00px;
z-index:12;
}

.logo-top {
position:fixed;
top:60px;
}

.right_group_list {
position:fixed;
top:200px;
left:680px;
width:180px;
min-height:36px;
padding:0px;
z-index:13;
}

.header {
height:180px;
}

.main_content {
top:180px;
}

.fixed_content {
position:fixed;
width:510px;
left:110px;
top:100px;
border-width:none;
padding-right:30px;
padding-left:30px;
z-index:6
}
投稿日時 - 2009-07-22 22:10:33
  • 回答No.3
レベル5

ベストアンサー率 33% (2/6)

回答の方の margin-top とか、padding-top を 180px 以上にしとけばイイんでないでしょうか。

或いは、アンカーと回答の間を180px以上空けておけば……。
このQ&Aのテーマ
このQ&Aで解決しましたか?
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


新大学生・新社会人のパソコンの悩みを解決!

-PR-

ピックアップ

-PR-
ページ先頭へ