Three image rounded corner menubar with CSS

[agent007]

Hi

I have seen plenty of tutorials etc on the Web explaining various means of using for small images to create curve cornered boxes in a Web Page. However the creation of those corner images can be a bit of a pain. Additionally, instead of just using a solid colour for the box background, I would like to use a an image with various gradient styles for example.

What I am trying to do at the moment is to create a menu bar with a specific height and length (say 15px x 900px), with one curved corner image at the left end, a repeating rectangular image in the middle and curved corner image ad the right end. Something similar to the blue menubar on this page. I would like to achieve this effect using divs and CSS.

I would be extremely grateful for any assistance.

Cheers

[MidiMagic]

First of all, I can't see why people want this. It reminds me of the roller rinks and restaurants in the 1940s and 1950s.

Why don't you just make one solid image for the while thing, if it is always to be a specific size?

You have to realize that not everyone uses the same screen resolution or browser window size. So you have to design your page to work with these various sizes.

If you use div to hold the sections, your menu bar WILL fall apart if it won't fit in the browser window. The fluid nature of div guarantees that. Try a table with the surrounding styles set to 0.

[sreein1986]

first you create one image in photoshop and if you possible put using with css style or put in manually...

[agent007]

First of all, I can't see why people want this. It reminds me of the roller rinks and restaurants in the 1940s and 1950s.

Why don't you just make one solid image for the while thing, if it is always to be a specific size?

You have to realize that not everyone uses the same screen resolution or browser window size. So you have to design your page to work with these various sizes.

Right, so there is something that is evidently not your cup of tea and you expect everyone else to share that sentiment. Sorry m8 but you will have to move to another part of the universe where the title of "MidiMagic The Supreme" can be conferred so you can wantonly banish to oblivion any of your brainwashed and subservient drones who dare to even hold their own opinions :) .

Yes, I do realise that not everyone uses "the same screen resolution or browser window size". That is why I usually implement or include (using supported Joomla templates) a means whereby users can dynamically change their page sizes to "800px", "950px" or "fluid" to correspond to their desired or optimum resolution. Yup and that works brilliantly with boxes surrounded by curve cornered borders. However, as I alluded to in my original post, these involve the usage of these pesky corner images which can be a pain to create. They require more code in the form of multiple nested divs in order to position properly. Hence the desire to reduce the number of images to 3.

Regards

[MelechM]

If the navigation menu will be a static width, for example 500px, then go in photoshop and make a rectangle with rounded corners that is 500px wide. Then cut out the bottom and top (parts with the rounded corners in them) and some simple css for the top of the menu and the bottom where the top opens the menu and the bottom closes it. The middle would be another image I guess since you are trying to use gradients.

[opsryushi]

Do I understand correctly in that you want to generate a rounded-corner effect using only div properties? If so...

At present, there is no legitimate or efficient way of achieving this. Images are a must in this sense.