通過CSS進行造型導航

Question

我遇到了解決造型導航問題的麻煩。這就是我想要的東西：

And this is a link to what I have so far.

這應該是兩個獨立的一個導航欄上的鏈接類。一個設置在左側的徽標和其他默認鏈接，右側設置爲社交。現在我只需要左側的幫助，但我想我會進一步解釋。

在左側，每個鏈接都應該位於它們自己的小塊中，左右邊框爲1px白色。在他們的懸停狀態下，他們的「盒子」的背景應該是白色的。該徽標應該在左側第一個。

對不起，我無法更好地解釋，但我已經盡力了。圖片和我迄今爲止所擁有的鏈接應該解釋得最多。

我認爲如果徽標是在CSS而不是HTML？

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> 

Answer 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 */ } 

我認爲這是你想要的。享受:)

Answer 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並執行clear: both;，它將在新行中。

Answer 3

使用

<img src="/imgs/navi/caul_white_nav.png" style="float: left;">