I am trying to create a navigation bar that is expandable by using an image with rounded gradient corners on each link.
I do not want to use CSS3, HTML5 or JavaScript, just plain CSS2.
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.
Thank you so much for your very strategic response! I did not try sliding doors, but I have used similar methods for other things and when the images overlapped, there was a mark where they met.
I did not think about padding; so I am going to give this a shot and I will post the results.
As you mentioned, my main worries was about the gradient colliding.