Comment dois-je convertir ce PSD en HTML & CSS Menu

Question

Je suis en train de convertir ce PSD en HTML avec CSS.

Et ce que j'ai jusqu'à présent (en utilisant CSS3).

Mais je n'ai aucune idée comment mettre un diviseur entre les éléments de menu. Des idées?

EDIT: Il semble que les images d'exemple ne s'affichent pas. Alors, ils sont là.

Le fichier PSD http://postimage.org/image/2qywn3nj8/

Ce que j'ai jusqu'à présent 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

Vous pouvez essayer d'ajouter un li vide et le styler comme séparateur. Je pense que ce serait codewise laid, mais quelque chose comme ça fonctionne:

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

mettre Peut-être un div large 1px entre chaque et lui donner un certain type de frontière tranchant comme rainure, arête , encart, début? Ou vous pourriez utiliser une image ... mais cela semble stupide pour quelque chose si peu.

Answer 3

Vos menus devraient vous ceci:

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

Answer 4

Vous pouvez utiliser quelque chose comme:

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

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

puis il suffit d'utiliser border-left: none; et border-right: none; comme une majoration supplémentaire sur le premier et le dernier de

#navl ul li

obtiendrez peut-être difficile avec l'espace que vous avez là en haut et le fond des lignes .. mais vous savez .. vous pouvez faire iit.

Answer 5

L'option la plus simple serait d'avoir une liste vide élément après chaque élément nav, puis le style en conséquence, mais ce n'est pas très sémantique.

Vous pouvez également essayer d'utiliser un sélecteur CSS comme: après (http://www.w3schools.com/cssref/sel_after.asp)