3

I'm trying to convert this PSD to HTML with CSS.

The photoshop file

And this is what I've got so far (using CSS3).

The actual menu

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;
     }
Ye Myat Aung
  • 1,783
  • 11
  • 31
  • 49

5 Answers5

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.

Jason Kaczmarsky
  • 1,666
  • 1
  • 17
  • 30
2

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>
SuperMykEl
  • 613
  • 3
  • 15
1

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.

Joonas
  • 7,227
  • 9
  • 40
  • 65
0

Your menus should like this :

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;
}
oknoorap
  • 1,923
  • 2
  • 14
  • 20
0

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 )

smilly92
  • 2,383
  • 1
  • 23
  • 43