ヘッダフッダ固定でコンテンツ部分が指定出来ない。

解決済

質問者：caseyjones
質問日時：2012/04/11 14:41
回答数：1件

お知恵を貸して下さい。

現在HPを作成していて、ヘッダフッダ固定を入れ、真ん中コンテンツ部分のみをスクロールさせるようにしました。

が、形を作ってから気付いたのですが、コンテンツ部分を指定する事が出来ず、
見る事は出来るのですが、文章中リンク等クリックする事が出来ません。

コンテンツ部分のみを取り出して（ヘッダフッダ無し）みたところ、問題なく動きました。

どこがおかしいのか、自分では解らなくなってしまいましたので、
どなたか詳しい方、お知恵をお貸しいただけないでしょうか。

どこが悪いのか、一つづつ見たのですが、私の知識では限界になってしまいました。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： tracer
回答日時：2012/04/11 17:35

どのような方法で、ヘッダ・フッタ固定をしているのか分からないので、なんとも回答ができないのですが。

文面を読む限りは、おそらく要素の重なり順が影響していると思われます。
コンテンツが正常表示されていても、重なりとして、ヘッダやフッタの下にコンテンツがある状況だと、クリックしているのは、コンテンツではなく、ヘッダ・フッタのどちらかということになります。具体的には、ヘッダ・フッタの透明部分をクリックしていることになるでしょう。
要素の重なり順は、CSSのz-indexで設定できます。ただ、z-indexを有効にするには、同要素にstatic以外の値をpositionに指定する必要があります。

#contents{
position:relative;
z-index:2;
}

この回答への補足

html　cssが規約違反という事で消えてしまっていました。

ご返答ありがとうございます。
z-indexを使用したのですが、それでもうまく行きませんでした。

補足で申し訳ありませんが、使用しているタグになります。

<body>
<img src="bgimages/bg1.jpg" alt="" class="bgmaximage" />
<script type="text/javascript">
$(function(){
jQuery('img.bgmaximage').maxImage({
isBackground: true,
overflow: 'auto',
verticalAlign:'center'
});
});
</script>

<div id="headerArea">
<div id="menu">
ここにメニュー
</div>
</div>
<div id="contentsArea">
<div id="container">
<div id="contents">
ここにコンテンツ
</div>
</div>
<div id="sidebar">
ここにサブメニュー
</div>
</div>
<div id="footerArea">Copyright</div>
</body>

/*↓ヘッダーフッダー固定↓*/
body{
margin: 0;
padding: 150px 0 50px 0;
color: #A0522D;
}
* html body{
overflow: hidden;
}
div#headerArea {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:url("../images/header.png");
background-repeat:repeat-x;
text-align: center;
}
div#footerArea {
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background-color: #BC8F8F;
text-align: center;
}
* html div#contentsArea{
height: 100%;
overflow: auto;
}
img.menu {
position: absolute;
}
div#menu{
position:absolute;
top: 78px;
width: 850px;
margin-left:-400px;
left: 50%;
text-align: center;
}
/*↑ヘッダーフッダー固定↑*/

/*↓コンテンツ表示部分↓*/
#contentsArea{
width: 900px;
margin: 20px auto;
}
#container{
width: 100%;
float: right;
margin-left: -180px;
}
#contents{
position:relative;
z-index:2;
margin: 0 30px 20px 120px;
padding: 20px 0 20px 0;
text-align: center;
background-image:url("../images/contents.png");
background-repeat:repeat-y;
}
#sidebar{
width: 180px;
float: left;
}
/*↑コンテンツ表示部分↑*/

補足日時：2012/04/11 17:50

通報する

- 0
- 件

通報する

この回答へのお礼

すみません。。。

自分で解決する事が出来ました。

div#headerArea {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:url("../images/header.png");
background-repeat:repeat-x;
text-align: center;
}

ここでheightをきちんと指定しなかった為に、前面に来てしまっていました。

ヒントを下さったので、ベストアンサーにさせて頂きます。

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