Find solution
How To Convert Psd To Html?

How should I convert this PSD to HTML & CSS Menu

  • 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:

    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>

Ye Myat Aung at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

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

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

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.

Lollero

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 )

slm_92

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.