It's been a while since I've messed with the CSS code and I can't figure out how to do this, and no luck with a search.

I would like to make my nav bar buttons transparent, or even black like my background, with white text. Also, in between each navbar button/word, I would like a white dividing line. I'm looking for a real similiar look to the navbar on this page:

http://emilydelph.smugmug.com/

My site is www.mattbeckmann.com.

TIA

The red represents the text color

The green represents the box background color

The last rule is the "hover" rule, same things apply as stated above, only this happens when the mouse hovers over the link.

#navcontainer ul {
    margin: 10px auto 0; /*top right/left bottom */
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#navcontainer ul li {
    display: inline;
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #4d4d4d;
}

#navcontainer ul li a:hover {
    color: #4d4d4d;
    background-color: #fff;
}

So to have it like the the example you showed change your nav-bar CSS rules to these:

#navcontainer ul {
    margin: 10px auto 0; /*top right/left bottom */
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#navcontainer ul li {
    display: inline;
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: none;
}

#navcontainer ul li a:hover {
    color: white;
    background-color: #202020;
}

Then change your custom header box to this, to have the seperating lines:

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>&nbsp;|
<li><a href="/gallery/5581584_H3gbU">Portfolio</a></li>&nbsp;|
<li><a href="/galleries">Galleries</a></li>&nbsp;|
<li><a href="/map">Map</a></li>&nbsp;|
<li><a href="/mysearch">Search</a></li>&nbsp;|
<li><a href="gallery/5702679_F9pm3">Services</a></li>&nbsp;|
<li><a href="/gallery/5629316_pBcK7">About</a></li>&nbsp;|
<li><a href="/gallery/5590449_oJFpj">Guestbook</a></li>
</ul>
</div>