Separators for Navigation

Question

I need to add separators between elements of navigation  Separators are images   My HTML structure is like  ol  gt  li  gt  a  gt  img  Here I come to two possible solutions   To add more li tags for separation  boo    Include separator in image of each element  this is better  but it makes possibility that user may click on  example   quot Home quot   but get to  quot Services quot   because they are one behind the other and user may accidentally click on separator that belongs to  quot Services quot     What to do

User · Answer

Put it in as a background on the list element:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

Next, I recommend a different markup for accessibility:
Rather than embedding the images inline, put text in as text, surround each with a span, apply the image as a background the the , and then hide the text with display:none -- this gives much more styling flexibilty, and allows you to use tiling with a 1px wide bg image, saves bandwidth, and you can embed it in a CSS sprite, which saves HTTP calls:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE OK, I see others got similar answer in before me -- and I note that John also includes a means for keeping the separator from appearing before the first element, by using the li + li selector -- which means any li coming after another li.

User · Answer

Add the separator to the li background and make sure the link doesn t expand to cover the separator  which means the separator won t be click-able

User · Answer

For those using Sass  I have written a mixin for this purpose    mixin addSeparator  element   separator   padding           element      element  before           content   separator          padding  0  padding            Example    include addSeparator  li        1em     Which will give you this   li li before     content         padding  0 1em

User · Answer

I believe the best solution for this  is what I use  and that is a natural css border   border-right 1px solid    You might need to take care of padding like   padding-left  5px  padding-right  5px    Finally  if you don t want the last li to have that seperating border  give it s last-child  none  in  border-right  like this   li last-child    border-right none      Good luck

User · Answer

If there isn t a pressing need to use images for the separators  you could do this with pure CSS    nav li   li before      content             padding  0 10px      This puts a bar between each list item  just as the image in the original question described  But since we re using the adjacent selectors  it doesn t put the bar before the first element  And since we re using the  before pseudo selector  it doesn t put one at the end

User · Answer

Simply use the separator image as a background image on the li   To get it to only appear in between list items  position the image to the left of the li  but not on the first one   For example    nav li   li       background url  seperator gif   no-repeat top left      padding-left  10px     This CSS adds the image to every list item that follows another list item - in other words all of them but the first   NB  Be aware the adjacent selector  li   li  doesn t work in IE6  so you will have to just add the background image to the conventional li  with a conditional stylesheet  and perhaps apply a negative margin to one of the edges

User · Answer

The other solution are OK  but there is no need to add separator at the very last if using  after or at the very beginning if using  before   SO   case  after   link after     content         padding  0 1rem      link last-child after     content          case  before   link before     content         padding  0 1rem      link first-child before     content

User · Answer

To get the separator vertically centered relative to the menu text   menustyle li   li before     content           padding  0    position  relative    top  -2px

User · Answer

You can add one li element where you want to add divider    lt ul gt       lt li gt  your content  lt  li gt       lt li class  divider-vertical-second-menu  gt  lt  li gt       lt li gt  NExt content  lt  li gt       lt li class  divider-vertical-second-menu  gt  lt  li gt       lt li gt  last item  lt  li gt   lt  ul gt    In CSS you can Add following code    divider-vertical-second-menu     height  40px     width  1px     margin  0 5px     overflow  hidden     background-color   DDD     border-right  2px solid  FFF      This will increase you speed of execution as it will not load any image  just test it out

[css] Separators for Navigation

Examples related to css

Examples related to navigation

Examples related to usability

Examples related to separator