Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Need help with sliding-doors style menu

    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 -

    http://www.siteoftom.com/thisisatest/thisisatest.html

    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 -

    http://www.siteoftom.com/thisisatest..._white_tab.png

    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.
    Last edited by moss2076; 10-11-2007 at 04:19 PM.

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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):

    http://just-in.org/etc/example.html
    Last edited by vtjustinb; 10-11-2007 at 04:58 PM.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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 -

    http://www.siteoftom.com/thisisatest/img_red_repeat.gif

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •