0

バナーのすぐ下に、サイトの水平ナビゲーション バーを作成しようとしています。Photoshop で作成した画像からナビゲーション バーを作成したい。私が何をしても、私はそれを機能させることができません。ロールオーバーリンクでも作ろうとしています。

誰かが私が間違っていることを教えてもらえますか? このコードは master.dwt ファイルの一部です。ルート ディレクトリの「templates」というフォルダにあります。

ありがとう！

CSSは次のとおりです。

#navigation {
    width: 800px;
    height: 36px;
    background-color: transparent;
    margin-left:auto;
    margin-right:auto;
}
#navbar {
    list-style: none;
    height: 36px;
}
#navbar li {
    float: left; }
#navbar a {
display:block;
background:url(../nav bar2.png);
width:200px;
text-indent:-9000px;
}
#navbar a.link1:hover {background-position:0px -36px;}
#navbar a.link2 {background-position:-200px 0px;}
#navbar a.link2:hover {background-position:-200px -36px;}
#navbar a.link3 {background-position:-400px 0px;}
#navbar a.link3:hover{background-position:-400px -36px;}
#navbar a.link4 {background-position:-600px 0px;}
#navber a.link4:hover {background-position:-600px -36px;}

HTMLは次のとおりです。

<div id="navigation">
<ul id="navbar">
<li><a href="default.html" class="link1">home</a></li>
<li><a href="about.html" class="link2">about</a></li>
<li><a href="portfolio.html" class="link3">portfolio</a></li>
<li><a href="contact.html" class="link4">contact</a></li>
</ul>
</div>

写真はこちら: http://i.stack.imgur.com/uEdO8.png

4

1 に答える 1

1

主な問題

(1)url()画像のパスに空白が含まれている場合は、パス全体を引用符で囲む必要があります。

background:url("../nav bar2.png");

そうは言っても、Web サイト ファイルのファイル名に空白を含めることはお勧めできません。空白をハイフンまたはアンダースコアに置き換えるか、単に空白を取り除く方が安全です。

(2) CSS セレクターの 1 つにタイプミスがあります。

#navber a.link4:hover    /* Wrong */
#navbar a.link4:hover    /* Right */

軽微な問題

(1) まだ行っていない場合 (おそらく reset.css を使用)、ulタグのデフォルトのスペースを削除します。そうしないと、4 つのメニュー項目 (それぞれ) がコンテナー200px内に収まりません。800px

#navbar {
    padding-left: 0;
    margin-left: 0;
}
于 2013-03-27T21:32:25.393 に答える