Navbar: How do I add images to the Nav Bar?

I am still under the customization stage of my website and need a little help.
I have the site at 100% expanding capability, and would like the nav bar to be the same with an image at the left and a repeating background image and an image to the right, like caps, so as to get the effect of rounded ends.
I have done this with tables in my older site (OscMax) and would like to be able to do it with <div> tags an CSS only.

example of old code from my mainpage template file:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
			  <td width="5"><img src="../images/navbar/nvbr_left_edge.jpg" width="10" height="31" border="0"></td>
			  <td align="center" background="../images/navbar/nvbr_bg.jpg" width="100%">
			    <table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
				  <td width="15%" nowrap>

<form method="post" action="http://www.yoursitehere.com/newsletter/lists/?p=subscribe" name="subscribeform" target = "_self"> 
<input type="text" size="10" maxLength=255 name="email" value = "Email Address" onFocus=doClear(this)>

<input type="hidden" name="list[2]" value=signup />

<input type=submit name="subscribe" value="Subscribe" onClick="return checkform();" >

</form>

</td>
				  <td align=center nowrap>
					<p align="center">  
				      <span class="navbarNav">
	                    <a href="../../namehere.html">Title</a>
					     |
	                    <a href="../../namehere.html">Title</a>
						 |
	                    <a href="../../namehere.html">Title</a>
						 |
	                    <a href="../../namehere.html">Title</a>
	  			         |
	                    <a href="../../namehere.html">Title</a>
	  			         |
	                    <a href="../../namehere.html">Title</a>
	  			         |
	                    <a href="../../namehere.html">Title</a><font color="red"> Specials!</font></a>  
	  			        </span>
					</p>
                  </td>
				  <td align="right" valign="middle" width="15%" nowrap><FORM name=quick_find action="advanced_search_result.php" method=get><INPUT value="Keyword(s)" size="10" maxLength=255 name=keywords onFocus=doClear(this)> <INPUT value="Search" type="submit"></FORM></td>
				</tr>
				</table>
			  </td>
			  <td width="5">
				<img src="../images/navbar/nvbr_right_edge.jpg" width="10" height="31" border="0"></td>
			</tr>
			</table>

Is there an easy way to accomplish this, if not could you inform me in detail on the technique to get this done.

Thanks you,

Hickaway

There are several methods to use depending on exactly what you want it to look like.

You might start here sample templates and look through them for things that you think might be close to what you are seeking and then these are available in the downloads section and you can see what was done to get the look.

kobra:

There are several methods to use depending on exactly what you want it to look like.

You might start here sample templates and look through them for things that you think might be close to what you are seeking and then these are available in the downloads section and you can see what was done to get the look.

Yes I have done all that, posting this thread is my final conclusion. I found one of the templates that mimics what I am trying to accomplish but the right images is just one long image across the page, I am trying to stay away from doing that.

This is the one that sort shows what I am after:
http://(sorry, site offline)/135/index.php?main_page=index&template_dir=future_zen

Sorry, may not help.

If possible, please give URL or image for reference for the effect which desired of, instead of code(s) and some descriptions which may be you familiar.

It may help to the better understanding between both of the two sides and will shorten the communications. And, it will draw more attentions, more helps and better answers.

.

The look of the navbar is 3 images:
(Left) image 10 x 31 – (middle) a repeating back ground image 1 x 31 - (right) image 10 x 31

Underneath that nav bar is an image I took from Dreamweaver in WYSIWYG mode; see the two missing images before member’s box and after search button at the ends that is what is going on without the images.

I would like to do this without using tables, only <div> tags and CSS; witch seems to be the way this ZenCart works throughout.

Is this possible?

I think I figured it out on my own,

but my search box is positioned a little high, why is that, why is it not sitting in the middle?

Please refer to the topic below, related to align Search Box in Nav Bar of the Header.
vertical-align not working!?!?!

.

seethrou:

Please refer to the topic below, related to align Search Box in Nav Bar of the Header.
vertical-align not working!?!?!

.

Hey thanks, I got it done

Ok that one did help, sort of. There is a link in it that is more direct to how it corrected my problem:
http://www.zen-cart.com/forum/showthread.php?t=46125&highlight=navMainWrapper

Now, to get the new page links in the middle of the navbar, almost done the nav bar.