0

このページの仕組みと同様に、ページのコンテンツが常にナビゲーション バーの下に表示されるようにしたいと考えています。

http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar

コンテンツを上下にスクロールできますが、ナビゲーション バーが消えることはありません。

この目的のためにposition:fixed、ナビゲーション バーをページの上部に固定していました。これは機能しますが、コンテンツを常にナビゲーション バーの下にプッシュしたい場合は、コンテンツを上下にスクロールすることができます。

これを行う方法についてのアイデアはありますか？<ul id='navigation'>ナビゲーションを含むためのCSSコードは次のとおりです。

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
}

#navigation li
{
    display: inline-block; 
    width: 150px;
    height: 110px;
    cursor: pointer;
}

<div id="container">そして、以下に表示され、#navigationすべてのページ コンテンツ ボディを保持するの css を次に示します。

#container
{
    position: absolute;
    margin-top: 180px;
    font-size: 25px;
    width: 90%;
}
4

4 に答える 4

3

進行中の理由は、ナビゲーション バーに背景色を設定していないためです。それを試してみてください。

編集：あなたのソースコードを見ました。style.css ファイルのナビゲーション CSS を次のように置き換えます。

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
    background-color: #FFFFFF;
    z-index:999;
}

問題は z-index でした。999 に配置すると、ナビゲーション バーが他のすべての要素の上に配置されます。

于 2013-01-18T18:29:40.917 に答える
1

プロパティ z-index:xxx を使用できます。試してみましたか?

于 2013-01-18T18:30:26.883 に答える
1

何年も前に、同じ機能を備えたサイトを作成しました。サーバーサイドインクルードを選択しましたが、うまく機能します。ナビゲーション リンクの「ヘッダー」と、各ページに含まれる「フッター」を作成しました。

于 2013-01-18T18:32:41.457 に答える
0

追加しようとしましたdata-role="header"か？

<div data-role="header" data-position="fixed">
于 2013-01-18T18:35:24.347 に答える