このPSDをHTMLとCSSメニューに変換するには

Question

私はこのPSDをCSS付きHTMLに変換しようとしています。

そして、これは私がこれまでに（CSS3を使用して）持っているものです。

しかし、私は、メニュー項目間の仕切りを入れてどのようにさっぱりだが。何か案は？

EDIT：例の画像が表示されていないようです。だからここにいるのです。

PSDファイル http://postimage.org/image/2qywn3nj8/

私がこれまで持っているもの http://postimage.org/image/1ylhjsv2c/

#nav 
{ 
    padding:0; 
    margin:0; 
    height: 35px; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    background-image: -moz-linear-gradient(top, #ffffff, #eaecec); 
    -moz-box-shadow: 0 0 1px #888; 
    } 

#nav ul 
{ 
    margin-top: 0px; 
    margin-left: 0; 
    Font-Family: Arial; 
    font-size: 10pt; 
    list-style: none; 
    padding-top: 8px; 
    color: #000000; 
    } 
#nav ul li 
{ 
    display: inline; 
    padding-left: 30px; 
    } 

Answer 1

空のLiを追加して、それをセパレータとして使用できます。私はそれが醜いcodewiseだろうと思うが、このようなものは動作します：

CSS：

#nav 
{ 
    padding:0; 
    margin:0; 
    height: 35px; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    background-image: -moz-linear-gradient(top, #ffffff, #eaecec); 
    -moz-box-shadow: 0 0 1px #888; 
    } 

#nav ul 
{ 
    margin-top: 0px; 
    margin-left: 0; 
    Font-Family: Arial; 
    font-size: 10pt; 
    list-style: none; 
    padding-top: 8px; 
    color: #000000; 
    } 
#nav ul li 
{ 
    display: inline; 
    padding-left: 15px; 
    } 
#nav ul li.sep{ 
    background-image: -moz-linear-gradient(top, #eaecec, #555555); 
    padding-left:1px; 
    margin-left: 15px; 

} 

HTML：

<div id="nav"> 
    <ul> 
     <li>test</li> 
     <li class="sep"></li> 
     <li>test2</li> 
     <li class="sep"></li> 
     <li>test3</li> 
     <li class="sep"></li> 
     <li>test</li> 
     <li class="sep"></li> 
     <li>test2</li> 
     <li class="sep"></li> 
     <li>test3</li> 
</ul> 
</div> 

Answer 2

はたぶんそれぞれ、それに溝のような鋭利なボーダーのいくつかのタイプを与える、尾根の間に1ピクセル幅のdiv要素を置きますインセット？あるいはイメージを使うこともできますが、それはあまりにも些細なことのためにばかげているようです。

Answer 3

あなたのメニューは次のようにする必要があります

HTML：

<div id="nav"> 
<ul> 
    <li><a href="#">Rates &amp; Plans</a></li> 
    <li><a href="#">Phones</a></li> 
    <li><a href="#">Rates</a></li> 
    <li><a href="#">Booking</a></li> 
    <li><a href="#">Coverage</a></li> 
    <li><a href="#">FAQ</a></li> 
    <li><a href="#">Support</a></li> 
</ul> 
</div> 

CSS：

#nav{ 
// Background 
} 
#nav ul 
padding:0;margin:0 0 0 30px; 
} 
#nav li{ 
background:url(separator.png) no-repeat 100% 0%; 
padding: 10px 15px; 
margin: 0 2px; 
} 

Answer 4

次のようなもの使用することができますだけでいくつかの余分なマークアップとしてborder-left: none;とborder-right: none;を使用し、その後

#nav ul li { 
    display: inline; 
    padding-left: 30px; 

    border-left: 1px solid #THE-WHITE-COLOR; 
    border-right: 1px solid #THE-GREY-COLOR; 
} 

との最初と最後#navl ul liの

あなたが一番上にそこに着いたスペースを持つトリッキーかもしれませんと行の下に..しかし、あなたが知っている..あなたは私が行うことができます。

Answer 5

最も簡単なオプションは、空のリストを持っているだろう要素を各nav項目の後に配置し、それに応じてスタイルを設定しますが、これはあまり意味がありません。

あなたはまたのようなCSSセレクタを使用して試みることができる：（http://www.w3schools.com/cssref/sel_after.asp）