2

ナビゲーションのスタイル設定の解決策が思い浮かびません。これは私が欲しいものです:

私が欲しいもの

そして、これは私がこれまでに持っているものへのリンクです。

これは、1 つのナビゲーション バー上の 2 つの別々のクラスのリンクであると想定されています。左側はロゴとその他のデフォルト リンク用、右側はソーシャル用です。今のところ左側のヘルプが必要ですが、さらに詳しく説明したいと思います.

左側では、各リンクをそれぞれの小さなブロックの中央に配置し、左右の境界線を 1 ピクセルの白にする必要があります。ホバー状態では、「ボックス」の背景は白でなければなりません。ロゴは左側の最初にある必要があります。

うまく説明できなくて申し訳ありませんが、最善を尽くしました。写真と私がこれまでに持っているものへのリンクは、最も説明する必要があります.

ロゴは HTML ではなく CSS の方がいいと思います??

CSS:

/* Navigation bar */
#navi {
   font-family: Helvetica Neue: Condensed Bold;
   font-size: 14px;
   color: white;
   text-transform: uppercase;
   background-color: #1e416f;
   height: 30px;
   margin: 0 0 20px 0;
   padding: 20px 0 0 0;
}

#navi a {
color: white;
margin: 0 0 0 20px;
height: 30px;
}

#navi a:hover {
background: white;
color: #1e416f;
}

HTML:

<!-- NAVIGATION -->
<div id="navi">
<img src="/imgs/navi/caul_white_nav.png">
<a href="#">Directories</a>
<a href="#">Committees</a>
<a href="#">Resources</a>
<a href="#">About</a>
</div>
4

3 に答える 3

2

次のようなものを試すことができます：

#navi img, #navi a {
    float: left; /* float next to each other on the left hand side */
}
#navi a { /* use some padding to have some empty space */
    padding: 5px;
    border-right: 1px solid #ffffff;
}
#navi a:hover { /* on hover, background white on A tags */
    background: #ffffff;
}

そして、収まるまでプレイするよりも、右側で同じことを行うことができ、ナビゲーション内で右にフロートさせることができます。別の DIV が必要な場合は、これ#naviを左右にフロートする必要があり#socialます。

要素 (ブロックされている) にのみパディングを使用する場合、左右のパディングが同じであるため、テキストは常に中央に配置されます。

ヒント: このようにフロートを使用していて、項目を新しい行に配置したい場合。通常、フロートの隣に設定されます。項目の後に DIV を使用して a を実行するclear: both;と、新しい行になります。

于 2013-08-27T13:21:11.770 に答える
1

私はあなたのデザインを使用してこれを書きました: http://jsfiddle.net/ninty9notout/v3658/

ここにあるものに関する情報のみ：

ホームページでは:<h1 class="logo">...</h1>を使用し、他のすべてのページでは:<div class="logo">...</div>

.logo左側に#primary-navくっつくように左に浮かせます。

liおよびaタグもすべて左にフロートされます。ブロック要素は、インライン要素よりもスタイル設定が簡単です。

#tools-nav右に浮いているので右側にくっつきます。

私はtext-indent: -9999px;、ロゴのテキストとアイコンになる可能性のあるテキストを非表示にしていました。プロパティ#tools-navを介してアイコンを自由に追加してください。backgroundアイコン アンカーの幅を、アイコンの幅 + 20 (両側で +10px) に設定します。

そして、それはそれです。

HTML:

<div id="navi">
    <h1 class="logo"><a href="#">Name of Site</a></h1>

    <ul id="primary-nav">
        <li><a href="#">Directories</a></li>
        <li><a href="#">Committees</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">About</a></li>
    </ul>

    <ul id="tools-nav">
        <li class="login"><a href="#">Log In</a></li>
        <li class="email icon"><a href="#">Email</a></li>
        <li class="twitter icon"><a href="#">Twitter</a></li>
        <li class="search icon"><a href="#">Search</a></li>
    </ul>
</div>

CSS:

#navi {
    height: 30px;
    background: #1e416f;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
}

.logo {
    margin: 0;
    padding: 0;
    float: left;
}

.logo a {
    float: left;
    margin: 2px 10px;
    width: 36px;
    height: 26px;
    background: url(http://redsky.incredifull.com/imgs/navi/caul_white_nav.png) left top no-repeat;
    text-indent: -9999px;
}

#primary-nav, #tools-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-nav li, #primary-nav a,
#tools-nav li, #tools-nav a { float: left; }

#primary-nav a,
#tools-nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
    border-right: 1px solid white;
    line-height: 30px;
}

#primary-nav li:first-child a,
#tools-nav li:first-child a{ border-left: 1px solid white; }

#tools-nav { float: right; }

#tools-nav .icon a {
    text-indent: -9999px;
}

#tools-nav .email a { /* image */ }
#tools-nav .twitter a { /* image */ }
#tools-nav .search a { /* image */ }

私はそれがあなたが望んでいたものだと思います。楽しみ ：）

于 2013-08-27T13:36:36.657 に答える
0

使用する

 <img src="/imgs/navi/caul_white_nav.png" style="float: left;">
于 2013-08-27T13:21:13.267 に答える