Css horizontal bar with two corners. Code needed please

I want to know how I can make a menu with css, which has a horizontal bar. The horizontal bar has corners. There are two corners, one in the top left hand corner, and the other in the top right hand corner. I have cut the horizontal bar up, so that the it loads faster, and that the corners will be added separately to the horizontal part. Cross-browser css code is essential. Can someone please show me the css code? Thanks in advance.

Slice up the image accordingly, place the middle section on the <ul> repeat-x (only have a small segment of the image and just repeat it) and then the left side corner on the first <li> and the right side corner image on the last <li>, and it should all be good :slight_smile:

You can have it all be one file though actually :slight_smile:

Just to clarify, will the nav dimensions be 898 x 29 px? or does it need to be narrower and / or higher?

If that’s the full size, definitely just use the one image as is. Even if the nav is to be narrower, I’d still use the images as is and not cut it up.

With those questions answered, I’ll suggest a layout method, if someone else doesn’t first.

Sorry I meant to say rounded corners.

Could someone please show a link, to where I can see a tutorial or something, or please post the code here? I am stuck.

Could you show an example of what you are shooting for? Either some code or an image…

Here is the background for the navigation, I just need to have text links (white text in Arial) on this:

I want to be able to add the rounded corners at each end, and then add the gradient between the two rounded corners, with the white Arial text links over the gradient.

Thanks, RyanReese. I will see how it goes.

Do you mean “rounded corners”? Otherwise, all elements have corners. :wink:

Horizontal navs are very common. Use a UL, with the LIs floated left. You can place background images on various elements, like the UL, perhaps the rightmost LI, or on a containing div.

Or you could use CSS3, which will only work in real browsers, or JavaScript.