0

問題のナビゲーション画像は次のとおりです。

http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png

私がやりたいことはかなり基本的なことで、過去に何度もやったことがありますが、なぜ今うまくいかないのか理解できません。基本的に上記の画像をナビゲーションの背景として使用し、それに応じて幅と背景の位置を調整します。これが私のCSSです：

#navigation { width: 960px; height: 28px; clear: both; background: url('../images/nav-bg.png') repeat-x; }

        #navigation ul { margin: 0 0 0 20px; padding: 0; }
            #navigation ul li { float: left; list-style: none; }
            #navigation ul li a { display: block; height: 28px; background: url('../images/nav-tabs.png') no-repeat; text-indent: -9999px;}

                #nav-home { width: 62px; }
                    #nav-home.active, #nav-home:hover { background-position: 0 -28px; }

                #nav-cp { width: 130px; background-position: -62px 0; }
                    #nav-cp.active, #nav-cp:hover { background-position: -62px -28px; }

                #nav-web { width: 106px; background-position: -192px 0; }
                    #nav-web.active, #nav-web:hover { background-position: -192px -28px; }

                #nav-clix { width: 106px; background-position: -298px 0; }
                    #nav-clix.active, #nav-clix:hover { background-position: -298px -28px; }

                #nav-dna { width: 90px; background-position: -405px 0; }
                    #nav-dna.active, #nav-dna:hover { background-position: -405px -28px; }

そして、これは、将来の校正のために指定された、一般的な HTML5 doctype <!DOCTYPE html> を使用したページ上のコードです。

<div id="navigation">

    <ul id="nav-tabs">
        <li><a href="#" id="nav-home">Home</a></li>
        <li><a href="#" id="nav-cp">Client Portal</a></li>
        <li><a href="#" id="nav-web">Weboptima</a></li>
        <li><a href="#" id="nav-clix">Clixfactor</a></li>
        <li><a href="#" id="nav-dna">Lead DNA</a></li>
    </ul>

</div>

私が遭遇した奇妙なことは次のとおりです。最初のタブであるホームは完全に機能します。残りの 4 つのタブは、!important を指定しない限り、最初の background-position プロパティに従いませんが、ロールオーバーは問題なく機能します。それぞれ、これら 2 つの状況の画像を次に示します。

http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png

http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png

この（できれば）単純な問題について少し洞察を探しているだけです。前もって感謝します！

4

2 に答える 2

1

背景画像を指定するスタイルは、タブのスタイルよりも具体的であるため、優先されます。

デフォルトで にbackgroundも設定される複合スタイル を使用する代わりに、個別のコンポーネントを指定します。background-position0% 0%

background-image: url('../images/nav-tabs.png'); background-repeat: no-repeat;

ここで特異性について読むことができます。

于 2009-08-07T20:46:40.583 に答える
0

何が問題なのか正確にはわかりませんが、CSS ルールの相対的な優先順位の問題のようです。

この種の問題については、Firebugが優れています。特定の要素について、どの CSS ルールが起動されているかを正確に教えてくれます。これは、問題がどこにあるかを確認するのに役立ちます。

(Firebug について既にご存知の場合はご容赦ください。ただし、驚くほど多くの Web 開発者はご存知ありません。)

于 2009-08-07T20:37:31.163 に答える