掲示板/総合質問板/過去ログ/一覧/ fixedでページ上部にナビゲータを固定した場合の内部リンク

0 名前： bleis-tift ： 2007/05/02（水） 11:55 ID:/nZG4jwS sub-1h: 現在、HTML生成用のツールを作成しているのですが、ちょっと困ったことがありまして、投稿させていただきました。

CSSのposition:fixedを使用してナビゲータ(今サイトのどの階層にいるかの情報)をページ上部に固定しているのですが、
そのため内部リンク(href属性の値の先頭に#が付くリンク)をクリックすると、リンク先がナビゲータの後ろに隠れてしまいます。

これをナビゲータに隠れないように表示させたいのですが、何かいい方法は無いでしょうか？

ちなみに、ブラウザはposition:fixedに対応しているものを想定しています(自分はIE7を使用しています)。

CSSの掲示板とHTMLの掲示板で迷ったので、こちらにさせていただきました。
よろしくお願いいたします。

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/02（水） 11:55 ［URL］ ID:Ehfvypix sub-r2

こんな案は如何でしょうか

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
html{
	overflow: auto;
}
#menu{
	background-color: #FCC;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: auto;
	left: 0px;
	height: 5%;
}
#main{
	position: fixed;
	top: 5%;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: auto;
}
.section{
	margin: 1em 0em;
	background-color: #CCF;
}
</style>
</head>
<body>
<div id="menu">
	<p>position:fixed</p>
</div>
<div id="main">
	<h1>test</h1>
	<ul>
		<li><a href="#s1">Section1</a></li>
		<li><a href="#s2">Section2</a></li>
	</ul>
	<div class="section" id="s1">
		<h2>1</h2>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
	</div>
	<div class="section" id="s2">
		<h2>2</h2>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
		<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
	</div>
</div>
</body>
</html>

2 名前： bleis-tift ： 2007/05/02（水） 11:55 ID:/nZG4jwS sub-1h: なるほど！
メインの部分もfixedにしてしまうのですね。
その方向で作ってみます。

どうもありがとうございました。