[HTML/CSS - HELP] Navigation

I've done before all my navigations fully with some images, but I'd like to try something new.

Heres what I've done so far.

http://i42.tinypic.com/t71wfr.png

The "Home" is just a <a href="index.php">Home</a>.

It works fine like that, but I'd like to add something more into it, so I created this in photoshop.
http://i44.tinypic.com/9iv9sw.png

I'd like that to be after every link in the navigation.
I tried some ways to add that into it, but each time it appears in place where I don't want it to be.

Any help on this?

a simple way would be to use tables.

Quote:

---

Originally Posted by EliteGM

a simple way would be to use tables.

---

Alright, thanks. I guess I'll give it a try.

PHP Code:

---

#menu a {
 display: block;
 float: left;
 background: transparent url(youimage.png) right top;
} 


---

---------- Post added at 01:07 PM ---------- Previous post was at 01:04 PM ----------

you might also want to add padding to right and left eventually and maybe add text-align center

Or..Make an image?

Like "| Home |" in the style you like?

Code:

---

<ul>
<li><a href="home.html">home</a></li>
<li><a href="home2.html">home2</a></li>
<li><a href="home3.html">home3</a></li>
</ul>

---

do it all in css.

give the UL the main background.
give the each LI a background of the vertical bar.

Code:

---

ul { background: url(background.jpg) 0 0 no-repeat; width:600px; height:50px; float:left; }
ul li { background: url(verticalBar.jpg) top right no-repeat; width:120px; height:50px; list-style-type:none; display:block; float:left; }
ul li a { display:block; width:100%; height:100%; text-decoration: none; }

---