Как мне конвертировать этот PSD в HTML & CSS Menu

Question

Я пытаюсь преобразовать этот PSD в HTML с помощью CSS.

И это то, что я получил до сих пор (используя CSS3).

Но я понятия не имею, как разместить разделитель между пунктами меню.Есть идеи?

РЕДАКТИРОВАТЬ: Кажется, пример изображения не отображаются.Итак, вот они.

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 и использовать его в качестве разделителя.Я думаю, что это было бы некрасиво, но что-то вроде этого работает:

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 пиксель между каждым и задайте ему какой-нибудь тип рамки с бороздками, такой как канавка, ребро, врезка, выемка?Или вы можете использовать изображение ... но это кажется глупым для чего-то такого маленького.

Answer 3

Вы можете использовать что-то вроде:

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

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

, а затем просто использовать border-left: none; и border-right: none; в качестве дополнительной разметки для первой и последней #navl ul li '

MightПолучите хитрость с местом, которое у вас есть в верхней и нижней части строк ... но вы знаете ... вы можете сделать это.

Answer 4

Самым простым вариантом было бы иметь пустой элемент списка после каждого элемента навигации и затем стилизовать его соответствующим образом, однако это не очень семантически.

Вы также можете попробовать использовать селектор CSS, например: after (http://www.w3schools.com/cssref/sel_after.asp)

Answer 5

Ваше меню должно выглядеть так:

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;
}