View Full Version : Need help with sliding-doors style menu

10-11-2007, 05:04 PM
Hi everyone I have designed a top header section for my site which includes a horizontal list menu which I want to add two "sliding-doors" style images to -


I have a horizontal menu called "leftmenu" which has the -"Home", "Products", "Services", "Support", "Order" horizontal menu. I would like this menu to have a "sliding-doors two-image" style background which is as wide as the menu items go, as the png fiile below shows -


Can anyone help me position and create the correct images eg short left image and long right image or vice versa? Im not sure how to do it! All the images I have are in the "thisisatest" directory.

10-11-2007, 05:52 PM
Cut your left image just after the curve so that you're right at the border of where the menu turns totally horizontal.

Then just get a 1px wide strip of the horizontal background (from top to bottom) and set it to repeat-x. Set the horizontal to be the background all the way across, and then put the left cap with the curve on top of it. That'll let you stretch it to any width without breaking the layout.

Here's an example (you can get the images through the CSS):


10-11-2007, 06:04 PM
Hi thanks for your reply, I forgot to mention that the "this is a test" (img_thisisatest.gif) image is only 300px wide, the rest of that menu uses a repeat-x file which has the same color background -


I used a repeating image to reduce the image sizes.

I only want the white tab menu to be as wide as the horizontal menu needs to be, not all the way across the page.

Sorry if I have confused even more!