How to make a nav bar like this?


I need to make a nav bar like this. Please check the attached image. The main thing is how to achieve the seperators in that nav bar ?

I want to make it using <ul><li> thing.

Please help.


For the border, you can do this:

.navbar li {
  border: solid #FFF;
  border-width: 0 0 0 1px;

.navbar li:first-child {
  border-width: 0;

The first part puts a border on the left of every element. The second part removes that border from the first one.

For the rest, you’ll just want to set the li to float or inline, give them some padding, and either set a background or use CSS3 gradient techniques.

It is sufficient to use negative margins and an overflow: hidden to hide the first separator and it will work on lesser browsers such as IE6.

<!DOCTYPE html>
ul {float:left;list-style:none;overflow:hidden;margin:0;padding:0;}
li {background-color:#07d;float:left;margin:0 0 0 -1px;padding:10px 0;}
a {border-left:1px solid #fff;color:#fff;display:block;float:left;height:30px;line-height:30px;padding:0 30px;text-decoration:none;text-transform:uppercase;}
<li><a href="#">Home</a>
<li><a href="#">Tours</a>
<li><a href="#">Reviews</a>
<li><a href="#">Network</a>

Instead the border use background-image to get a more appealing result.

No point in teaching those who are new how to put their shoes on without tying them:

<li><a href="#">Home</a>[b]</li>[/b]
<li><a href="#">Tours</a>[b]</li>[/b]
<li><a href="#">Reviews</a>[b]</li>[/b]
<li><a href="#">Network</a>[b]</li>[/b]

That or go all hardcore and leave out the html and body tags too.[/ot]

Off topic,

<li><a href="#">Home</a>[s][B]</li>[/B][/s]
<li><a href="#">Tours</a>[s][B]</li>[/B][/s]
<li><a href="#">Reviews</a>[s][B]</li>[/B][/s]
<li><a href="#">Network</a>[s][B]</li>[/B][/s]

It is valid code, cf.:


Not tying your shoes when you put them on is also valid, just sloppy. Most of the time, they do stay on your feet that way (untied).

Why I said go all the way and remove the html and body tags too. I can only assume the point of letting the browser close tags for you is to save bytes. You can save even more![/ot]

Assuming you’re DUMB ENOUGH to be trying to deploy HTML 5, and/or believe in using the type of fast/loose formatting rules that make HTML/SGML a steaming pile… Of course, not knowing what doctype the OP is using, they could be making the sane choice of XHTML Strict (or the dumbass one of XHTML tranny) in whcih case the </li> is NOT optional.

But then, after three and a half decades writing software, I REALLY like to see closures on code blocks so I can see it EXACTLY instead of having to guess wildly – just like the browser does.

Crusty: it’s also valid HTML4 (the only reason it’s valid HTML5 anyway).

I just find it a bit sloppy when presented to people who seem new to HTML… if the OP looked at it and read how it goes and decided to leave off tags the browser will close itself, fine. zoom:1 obviously is familiar with HTML and knows what one can get away with or not.

Yeah, kinda like whining about not crossing t’s or dotting i’s, but what the hell… I’m practically required to bring it up anyway : )

Nyan nyan nyan nyan!