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

質問

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

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

回答No.4

nobuoka · ベストアンサー

おおう、なんか思ってたのと全然違ってびっくりしました笑
デザインはいい感じですね。 コードに関しては色々言いたいことがありますが (空要素 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>

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

お礼

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

補足

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

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

この部分の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>

回答No.3

shokodei

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

或いは、アンカーと回答の間を180px以上空けておけば……。

回答No.2

nobuoka

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

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

div.sample {
position: relative;
top: 180px
}

補足

全くの素人なもので、質問の仕方もよく分からずご迷惑おかけします。
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
}

回答No.1

noname#119957

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