CSS：背景位置が正しく動作しない

Question

CSSを使用して画像上にナビゲーションバーを配置しようとしています。しかし、私はポジションを得ることができません。起こっていることは、画像の最初の200ピクセルは、バックグラウンドポジションから次の200ピクセルの代わりに表示され続けるということです。コードは助けてください。

HTML：

<div id="topnav"> 
    <ul> 
    <li id="nav-home"><a href="index.html">Feature Product<span></span></a></li> 
    <li id="nav-all"><a href="shop_owners.html">All Products<span></span></a></li> 
    <li id="nav-how"><a href="all_products.html">How It Works<span></span></a></li> 
    </ul> 
</div> 

CSS：

#topnav { 
    position: relative; 
    left: 150px; 
    top: 100px; 
    margin: 0; 
    padding: 0; 
    height: 50px; 
} 

#topnav ul { 
    list-style-type: none; 
    text-align: center; 
    line-height: 50px; 
} 

#topnav ul li { 
    float: left; 
} 

#topnav ul li a { 
    background: url(../nav-bar-2.png); 
    background-repeat: no-repeat; 
    display: block; 
    height: 50px; 
    position: relative; 
} 

#nav-home { 
    width: 200px; 
} 

#nav-all { 
    width: 200px; 
    background-position: -200 0px 
} 

#nav-how { 
    width: 200px; 
    background-position: -400px 0px 
} 

#topnav ul li a span { 
    background: url(../nav-bar-2.png) no-repeat scroll bottom left; 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 50px; 
    width: 100%; 
    z-index: 100; 
} 

#topnav li a span:hover { 
    cursor: pointer; 
} 

#nav-home span { 
    background-position: 0px -50px 
} 

#nav-all span { 
    background-position: -200 -50px; 
} 

#nav-how span { 
    background-position: -400 -50px; 
} 

Answer 1

私は、これが問題だと思う：

#nav-home{width:200px;} 
#nav-all{width:200px; background-position:-200 0px} 
#nav-how{width:200px; background-position:-400px 0px} 

第二及び第三の要素のためのコードは、それぞれ、左側に背景画像200pxのと400ピクセルを移動させます。ただし、#nav-allと#nav-howには背景画像がありません。設定した唯一の場所は、リンク上にあり、リンクとその内側のスパンです。

はこの変更を行ってみてください：

#topnav ul li {background:url(../nav-bar-2.png); // a was removed from end of list 

ここで、背景画像は、li要素に、それが左にそれをピクセルの正確な数を移動することができたCSSコードであること。 （私はほとんどの場合、idがCSSに適用するタグを指定します。これは、少なくとも非実動コードではこの問題を軽減するのに役立ちます。つまり、li#nav-homeとli#nav-allを使用して、

---

また、ピクセル単位であることが意図されている長さ値にpxを省略しません。一部のブラウザでは、pxをデフォルトの長さとして使用していますが、この動作に頼るのではなく、ユニットをpxとして明示的に指定するほうがずっと良いです。 ：D

Answer 2

あなたのLI -tagの背景位置を設定しているが、あなたは何か他のものの上に背景画像を入れている、span - あなたは適切に形成されたSPANタグを持っていません。

Answer 3

ユニットを指定していません。ちょうど-200は多くのことを意味する可能性があります。 -200pxを使用してください。