0

私は再び問題を抱えています。Arcade ページを更新したばかりで、サイトの他のページとは異なるナビゲーション バーを表示したいと考えています。タブとして使用しているすべての div をposition:relative;div にすると、うまく機能します。しかし、アーケードのどこにいても、タブを一番上に置いておきたいです。

タブをに変更したところposition:fixed、機能しなくなりました。すべてのタブを互いに重ねて、1 つだけが見えるようにしました。私はこの問題を調査していて、それに関する記事を見つけました。この記事では、すべてのposition:relativediv を 1 つの固定位置 div 内に配置する方法について説明します。試してみましたが、うまくいきません。

これらのタブを保持するために PHP ファイルを使用しています。

これは、ヘッダー ファイルの HTML です。

<body>
    <br />
  <div id="gamenav-fixed"><center><a href="/"><div class="game-home">Home</div></a><a href="/arcade/action"><div class="game-nav">Action</div></a><a href="/arcade/arcade"><div class="game-nav">Arcade</div></a><a href="/arcade/puzzle"><div class="game-nav">Puzzle</div></a><a href="/arcade/vehicle"><div class="game-nav">Vehicle</div></a><a href="/arcade/violence"><div class="game-nav">Violence</div></a><a href="/arcade/defense"><div class="game-nav">Defense</div></a><a href="/arcade/rpg"><div class="game-nav">Role Playing</div></a><br /><br /></div>
  <div class="text-center"><font face="lucida console" size="12px" color="#686868">Game</font><font face="baskerville old face" size="12px" color="#888888"><b>Shank</b></font></br></br></div>
</body>

これらのタブに使用している CSS は次のとおりです。

/* The following is for the arcade page navigation! */
/* Center navigation. */
    div#gamenav-fixed:{
        position:fixed;
    }
    .game-nav{
        border:0px;
        padding:9px 25px 10px 25px;
        box-shadow:0px 0px 0px 0px;
            transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
        font-family:arial;
        color:#909090;
        text-size:12px;
        text-align:center;
        display:inline;
        position:relative;
        background-color:#e0e0e0;
    }
        .game-nav:hover{
            border:0px solid #686868;
                transition: .5;
                -moz-transition: .5;
                -webkit-transition: .5;
            background:#c0c0c0;
            color:#202020;
        }
            .game-nav:active{
                border:0px solid #686868;
                    transition: .5;
                    -moz-transition: .5;
                    -webkit-transition: .5;
                box-shadow:0px 0px 10px 1px #a0a0a0 inset;
                background:#d0d0d0;
                color:#202020;
            }
    .game-home{
        border:0px;
        padding:9px 25px 10px 25px;
        box-shadow:0px 0px 0px 0px;
            transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
        font-family:arial;
        color:#202020;
        text-size:12px;
        text-align:center;
        display:inline;
        background-color:#c0c0c0;
        position:relative;
    }
        .game-home:hover{
            border:0px solid #686868;
                transition: .5;
                -moz-transition: .5;
                -webkit-transition: .5;
            background:#e0e0e0;
            color:#909090;
        }
            .game-home:active{
                border:0px solid #686868;
                    transition: .5;
                    -moz-transition: .5;
                    -webkit-transition: .5;
                box-shadow:0px 0px 10px 1px #a0a0a0 inset;
                background:#d0d0d0;
                color:#202020;
            }

/* Ends arcade navigation! */

私のウェブサイトはgameshank.comです。そして、早々にありがとう！

4

2 に答える 2

0

まず、CSSにエラーがあります 

div#gamenav-fixed:{

「:」なしである必要があります

私にとっては、それは重なっておらず、id を 100% に設定する唯一の方法は、ページ全体として幅が広く、中央に配置されていることです。

div#gamenav-fixed {
    position: fixed;
    width: 100%;
}

これに問題がある場合は、HTML 全体を貼り付けていただけますか? doctype や同様の sth に問題がある可能性があります。これにより、すべてのブラウザーでページが正しくレンダラーにならない可能性があります。使用しているブラウザを指定することもできます。

これが機能することのjsfiddle証明は次のとおりです。

http://jsfiddle.net/Ed8T8/1/

于 2013-10-05T12:42:46.507 に答える