Dividers on Horizontal Nav list

Question

My task is to input some horizontal bars between links on a simple, unsorted nav list for my company's website.

I've tried each method listed on Vertical dividers on horizontal UL menu , to no avail. One of the links in that thread led me to http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/ , which worked!...kind of.

http://s21.postimg.org/nno183jl3/problems.jpg

That's what I'm getting right now: the dividers have moved off to the left hand side of the nav list. At this point, I'm a little stumped, so I was hoping you guys could help me out.

Here's the HTML. "cart_count.tpl" is the shopping cart stuff on the right.

<div style=float:right id="topbar">
 <nav>
  <div id="thisisthecartfunction" style=float:right>
   {include file="cart_count.tpl"}</div>
  <ul style=float:right>
   <li><a href="/member">My Account</a></li>
   <li><a href="/member_wishlist">Wish List</a></li>
   <li><a href="/tracking">Order Status</a></li>
   <li><a href="/category/customer-service">Customer Service</a></li>
  </ul> 
 </nav>
</div>

And here's the CSS. I know it's a bit long and cluttered.

#container > header > #topbar { width: 100%; background: #f8f8f8; margin: 0 auto;}
#container > header > #topbar > nav { width: 980px; overflow: hidden; margin: 0px auto;}
#container > header > #topbar > nav > div > #cartitems {vertical-align: bottom; margin: 3px 0px 10px 10px; }
#container > header > #topbar > nav > ul {list-style-type: none; margin: 0; padding: 0;}
#container > header > #topbar > nav > ul > li {display: inline;list-style-type: none;}
#container > header > #topbar > nav > ul > li+li { border-left: 1px solid #000000 }
#container > header > #topbar > nav > ul > li > a {display: inline; float: right; background: #f8f8f8; color: #666666; text-decoration: none; vertical-align: bottom; margin: 5px 0px 10px 10px; }
#container > header > #topbar > nav > ul > li > a:hover { text-decoration: underline; }

Any help would be greatly appreciated.

Solution 1

A good direction would be to use a separate list item as a placeholder for each divider like so:

#topbar { width: 100%; background: #f8f8f8; margin: 0 auto;}
#topbar > nav { width: 980px; overflow: hidden; margin: 0px auto;}
#topbar > nav > ul {list-style-type: none; margin: 0; padding: 0;float:left;}
#topbar > nav > ul > li {display: inline;list-style-type: none;}
#topbar > nav > ul > li > a:hover { text-decoration: underline; }

<div id="topbar">
 <nav>
  <ul>
   <li><a href="/member">My Account</a></li>
   <li class="divider">|</li>
   <li><a href="/member_wishlist">Wish List</a></li>
   <li class="divider">|</li>
   <li><a href="/tracking">Order Status</a></li>
    <li class="divider">|</li>
   <li><a href="/category/customer-service">Customer Service</a></li>
  </ul> 
 </nav>
</div>

That way you can clean up your current CSS and have granular control over the divider, be it an image or text. Also notice that I removed the float from <div id="topBar"> and <ul>. You only need a float in your CSS for the <ul>. I also removed the #container > header > from your CSS as it is superfluous CSS. See working example here: http://jsfiddle.net/QhCeH/

Solution 2

My favorite way to accomplish this and also in my opinion the easiest, is setting border-right to your <li> elements. A made a simple, choppy JSfiddle as an example.

As you can see, it's nothing beautiful but you get the idea. This also avoids using the HTML <nav> element, which in my opinion is generally useless and I have found you can achieve much more precision in design using unordered lists. In this case, you could even add a class first so that you can have a border at the beginning of the first element as well.

Example:

.first {
    border-left: 1px solid #hexhex
    height: set the height;