CODEWITHSUNDEEP
htmlcsspsd
Ye Myat Aung
Ye Myat Aung

Reputation: 1853

How should I convert this PSD to HTML & CSS Menu

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

Upvotes: 3

Views: 1693

Answers (5)

smilly92
smilly92

Reputation: 2443

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 )

Upvotes: 0

Joonas
Joonas

Reputation: 7303

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.

Upvotes: 1

SuperMykEl
SuperMykEl

Reputation: 623

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>

Upvotes: 2

oknoorap
oknoorap

Reputation: 1953

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

Upvotes: 0

Jason Kaczmarsky
Jason Kaczmarsky

Reputation: 1686

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.

Upvotes: 2

Related Questions