0

私はstackoverflowに関するいくつかの質問に目を通しましたが、まだ答えが見つかりません.Googleで検索しても役に立たなかった....

これが私のCSSです：

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
}

最も一般的な質問は、ファイルが正しいフォルダーにあるかどうかです。間違いなくそうです。このサイトはライブではありません。これまでのところ、ローカル ファイルのみで作業しています。

付属の HTML は次のとおりです。

<div id="nav">
 <ul>
    <li><a href="kitchen.html">Kitchen &amp; Bath</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="interior.html">Interior Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="graphic.html">Graphic Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="cad.html">Auto CAD</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="modeling.html">3D Modeling</a></li>
</ul>

何かの参考になれば。

ナビゲーションの両側に「アクセント ライン」を作ろうとしていますが、それが正しい方法かどうかわかりません。これは、私に「インスピレーションを与えた」サイトへのリンクです.... ナビゲーションの両側にエレガントな小さな線があることがわかります. それらは私が作成しようとしているものです。

http://www.tinkeringmonkey.com/

私が言ったように、おそらく私はそれについて間違った方法で進んでいます。既存のコードを機能させるための提案、またはこれを行うための改善された方法に関する提案は大歓迎です。

4

2 に答える 2

1

の高さを指定する必要がありますnav。また、line-height を指定して、 内のテキストulが垂直方向の中央に配置されるようにすることもお勧めします。

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
    height: 20px;
    line-height: 20px;
}
于 2012-08-09T22:30:04.607 に答える
0

高さと幅を #nav に追加し、引用符を background-image:url() に追加してみてください。

#nav {
text-align:center;
display: block;
background-image: url('./lines.png');
background-repeat: repeat-x;
font-family: Gabrielle;
text-decoration: none;
}

また、ファイル名/タイプとファイルの場所を再確認してください。上記の解決策は、html ファイルと同じフォルダーに「lines.png」というファイルがある場合に機能するはずです。

于 2012-08-09T23:04:12.420 に答える