2012-01-26 32 views
1

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

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; 
} 
+0

それはあなたの正確なコードですか?あなたはあなたの値にいくつかのpxがありません。 –

+0

はい、そうです。申し訳ありませんが、あなたの話していることはわかりません。私はクラスのためのウェブページを作ろうとしていて、それはあまりよくありません。 –

+0

あなたはいくつかのポジションが間違っています。背景位置:-200 -50ピクセル;各値(すなわち、-200px -50px)の測定(px)が必要です。 –

答えて

3

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

#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-homeli#nav-allを使用して、


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

+0

あなたはちょうど私の日を作った!!!!!!!!!!!!!!!!!!!!!!!! –

+0

@BryceEasley喜んで私は助けることができました。 :) –

0

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

+0

返事をありがとう。私はまだ混乱している。背景画像が何か他のものにある場合、リンク上に画像が表示されるのはなぜですか?私はこのようなものを複製しようとしていますhttp://dragoninteractive.com/しかし、私の問題は、nav-barが各リンクのホームイメージを何度も繰り返していることです。 –

1

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

関連する問題