How should I convert this PSD to HTML & CSS Menu - html

Question

I'm trying to convert this PSD to HTML with CSS.
And this is what I've got so far (using CSS3).
But I've no idea how to put a divider between the menu items. Any ideas?
EDIT: Seems example images aren't showing. So here they are.
The PSD File
http://postimage.org/image/2qywn3nj8/
What I've got so far
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

You could try adding an empty li and style it as your separator. I think that would be ugly codewise, but something like this works:
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

Maybe put a 1px wide div in between each and give it some type of edged border like groove, ridge, inset, outset? Or you could use an image...but that seems silly for something so little.

Answer 3

You could use something like:
#nav ul li {
display: inline;
padding-left: 30px;
border-left: 1px solid #THE-WHITE-COLOR;
border-right: 1px solid #THE-GREY-COLOR;
}
and then just use border-left: none; and border-right: none; as some extra markup on the first and last #navl ul li's
Might get tricky with the space you got there at the top and bottom of the lines.. but you know.. you can do iit.

Answer 4

Your menus should like this :
HTML:
<div id="nav">
<ul>
<li>Rates & Plans</li>
<li>Phones</li>
<li>Rates</li>
<li>Booking</li>
<li>Coverage</li>
<li>FAQ</li>
<li>Support</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 5

The easiest option would be to have an empty list element after each nav item and then style it accordingly, however this isn't very semantic.
You could also try using a CSS selector such as :after ( http://www.w3schools.com/cssref/sel_after.asp )