I am trying to create a navigation bar that is expandable by using an image with rounded gradient corners on each link.
My plan is to slice the image so that the tab expands when the text in the link is increased; example: if I have a word like, red link and later change it to yellow link, I need the tab to expand and accommodate the additional text.
The image is gradient round image, how do I pull this of so that the link expand when the text is increase?
I could do this by using the sliding door technique but this poses a problem because the image has a gradient border, and because sliding door overlaps, there will be a visible line where the slices of the images overlapped.
Also I could place one slice of the image(left corner) on the background of the li tag and placed the other slice (right corner) on the anchor tag; however, how do I repeat the gradient body of the image?
Going on that image, that is fine to do with sliding doors. I would say do it just as two images, because I can’t see any gradient that would cause a problem there.
There are several ways to set this up, but one way is to have some padding on the LI (say to the left) and place the left rounded edge on that as a bg image, then place the rest of the image on the anchor (maybe set to display: block for good measure). Make that longer image quite long, and sitting to the right of the anchor link as a bg image.
By having the padding on the LI, there is no overlap with the bg image on the anchor itself. I’m assuming that’s the problem you were describing?
Could you post an image of what this will look like so that we can visualize it? I was going to suggest sliding doors. Sometimes you have to make compromises. CSS3 is the obvious answer here, but just be aware that CSS2 can’t do everything, so you need to work within its limitations.