Hey guys,

I have a navigation bar to code (see attached).

There are 2 methods I am thinking of using

To use HTML/CSS with inline elements to create this with rollovers, or to use images with Javascript to create the rollovers

I think that the HTML/CSS way will load faster, however I cannot get the navigation bar looking the same as the attached image. If I was doing it this way would I use a background image and then code the inline elements over this image?

Which way is better?

CSS will be far easier, cleaner and more accessable in this case.

You only need 1 image - the gradient that runs along the entire background of the bar. Just make a 1 pixel wide image, and set it to be the background image of a DIV. Repeat it with background-repeat.

<div id="Navigate">
    <a href="services.htm"> Services</a> | <a href="ourapproach.htm">Our Approach</a> | .....
</div>

div#Navigate
{
    background-image: url( images/navbg.gif );
    background-repeat: repeat-x;
    // Anything else here... margin, padding, etc
}
 
div#Navigate a:link
{
   // Set the style for the link here
    font-weight: bold;
    font-family: Ariel, Helvetica, sans-serif;
}
 
div#Navigate a:hover
{
    // and set the colour it should change to here
    color: white;
}

Thanks Minaki, great help