爲從切片構建的導航項添加背景顏色

Question

我正在設計一個自定義導航菜單，您可以在其當前狀態here中看到該菜單。每個單獨的導航項目看起來是這樣的：

所以基本上每一個導航項目從單槓「掛」。圖像的主要部分是由一個像三片：

左：右：和中間：

爲中DIV背景有重複-X採用，所以它會增長以適應導航項目的內容，即文本。

這是CSS我現在有左，右和中間的DIV：

.left { 
    float: left; 
    width: 13px; 
    background-image: url(nav/images/nav_01.png); 
    background-repeat: no-repeat; 
    height:46px; 
    margin-left:2%; 
} 

.middle { 
    width:auto; 
    float:left; 
    background-image: url(nav/images/nav_02.png); 
    background-repeat: repeat-x; 
    font-size:20px; 
    font-family: Typewriter; 
    color:#393526; 
    height:46px; 
    padding-left:1px; 
} 

.right { 
    float: left; 
    width: 13px; 
    background-image: url(nav/images/nav_03.png); 
    background-repeat: no-repeat; 
    height:46px; 
} 

到目前爲止好，但後來我不得不工作，如何以包括連接主水平豎線欄中爲導航項目構建的圖像，以便始終居中。我做的方式，它是包括中格內爲它股利如下：

，然後施加負邊距的「頂部」 DIV：

.top { 
    height:27px; 
    background-image: url(nav/images/top.png); 
    background-repeat: no-repeat; 
    background-position-x: center; 
    margin-top:-24px; 
} 

和積極邊距的「nav_image」 DIV：

.nav_image { 
    margin-top:27px; 
} 

我不知道這是否是要達到什麼我正在尋找最好的方式，但它工作至今。

我遇到的問題是爲'nav_image'DIV設置背景顏色。我想爲此設置一種顏色，並在懸停上設置另一種顏色。我希望能夠爲這個DIV添加圓角，然後爲背景圖像設置背景顏色。

目前DIV'nav_image'顯示寬度爲1200px，高度爲0px。我原以爲它會繼承三個孩子DIVS的總寬度，即左邊，中間和右邊，但顯然這不是正在發生的事情。所以我似乎沒有DIV來應用背景顏色。

我希望這很清楚，感謝您的閱讀，我很樂意爲您提供任何建議。

Nick。

Answer 1

1）這些添加到CSS：

ul#list-nav li { 
    float:left; 
    display:inline; 
} 

.clear { 
    clear:both; 
} 

2）添加<div class="clear"></div>每個<div class="right"></div>

3）除去.left的margin-left: 2%;後（添加餘量ul#list-nav li代替）

的nav_image應該有正確的寬度和高度現在

Answer 2

嗨我想你應該喜歡我檢查你的代碼和一些修改，創造輕鬆碼到您的導航和標誌，請選中」

的CSS

.header, .navi, ul, li, a, span{ 
    margin:0; 
    padding:0; 
} 
    .header{ 
     overflow:hidden; 
     z-index:5; } 


     .logo{ 
      position:relative; 
      z-index:1; 
    height:188px; 
    width:100%; 
     } 


     .navi{ 
      position:absolute; 
      left:40%; 
      right:0; 
      z-index:2; 
      top:148px; 
      list-style:none; 
     } 


     li{ 
      float:left; 
      background:url('http://soteriabrighton.co.uk/test2/nav/images/top.png') no-repeat 10% 0; 
      margin-left:2%; 
     } 
     .navi a{ 
      background:url('http://s16.postimage.org/yqxo6bq6p/navi_left.png') no-repeat left top; 
      padding-left:9px; 
      color:#000; 
      margin-top:27px; 
      text-decoration:none; 
      font-size:22px; 
      float:left; 
       border-radius:5px 0 0 5px; 
     } 
     .navi a span{ 
      background:url('http://s17.postimage.org/ukpot5zcb/navi_right.png') no-repeat right top; 
      padding-right:9px; 
      float:left; 
      line-height:38px; 
      border-radius:0 5px 5px 0; 
     } 
     .navi a:hover span, .navi a:hover{ 
      background:green; 
      color:#fff; 
      border-radius:5px; 
     } 

HTML

<div class="header"> 
     <img src="http://soteriabrighton.co.uk/test2/logo.png" alt="" class="logo" /> 
     <ul class="navi"> 
      <li><a href="#"><span>home</span></a></li> 
      <li><a href="#"><span>news</span></a></li> 
      <li><a href="#"><span>forums</span></a></li> 
      <li><a href="#"><span>articles</span></a></li> 
      <li><a href="#"><span>contact</span></a></li> 
     </ul> 
    </div> 

現場演示http://jsfiddle.net/Kj2e9/

Answer 3

您可以簡化標記a很多開始。

<li> 
    <a> 
     Home 
    </a> 
</li> 

然後，我會使用僞元素而不是直HTML標記來實現「側面圖像」。我沒有測試過這個，但它應該指向你正確的方向：

這裏的關鍵是：1）使用絕對定位上：之前和：之後僞和2）添加13px左右填充<a>元素。除此之外，你的代碼看起來對與3）顯示：上<a>我覺得塊可能是在得到這個工作的權利

li a { 
    padding: 0 13px; 
    width:auto; 
    float:left; 
    display: block; 
    position: relative; 
    background-image: url(nav/images/nav_02.png); 
    background-repeat: repeat-x; 
    font-size:20px; 
    font-family: Typewriter; 
    color:#393526; 
    height:46px; 
    padding-left:1px; 
} 

li a:before, 
li a:after { 
    content: ' '; 
    width: 13px; 
    height:46px; 
    position: absolute; 
    top: 0; 
    background-repeat: no-repeat 
} 

li a:before { 
    left: 0; 
    background-image: url(nav/images/nav_03.png); 
} 

li a:after { 
    right: 0; 
    background-image: url(nav/images/nav_01.png); 
}