Background Image glitch

Poster: prubin
Dated: Saturday January 19 2008 - 16:57:58 GMT

I have a menu at http://test2.tbnonline.com when menu have no sub-menu the 'buttons' look pretty good. But when there is a sub menu the button seems to get truncated where the sub-arrow shows. If you log in as test2trial / visitor, you can see the effect on the manage button. Can you suggest how I should fix this. The button images were provided to me and I have already asked that they move the green box over a couple of pixels, but I am not sure why the button get shorter?

Thanks.

Re: Background Image glitch

Poster: Ruth
Dated: Saturday January 19 2008 - 23:18:36 GMT

Hi,

I am working on this for you. Can you tell me where you got the button images?

Ruth

Re: Background Image glitch

Poster: prubin
Dated: Sunday January 20 2008 - 16:16:32 GMT

I created the images myself. I have a couple sizes as I was trying to figure out the best fit. I understand the loss of the right side when the sub arrow comes up, but I am confused about the button getting narrower.

Thanks.

Re: Background Image glitch

Poster: Ruth
Dated: Sunday January 20 2008 - 20:33:40 GMT

Hi,

OK, here is your page with the problem fixed and below is a zip file with all the images. Mouseover the Managed item to see the submenu and how it is working. I tested in IE6, NN7 and 9, FF 1.5, Safari 3 for pc and it looks fine in all those. I can't test macs. LINK REMOVED

Now, as to the explanation. Background images fit in the available space [if you're not setting them up using css to control their position, repeat value, etc.] So, let's say your original bgimage is that button, 108x26, if you put that on a page it would repeat however many times, both vertically and horizontally to fill the available space. If you size the page smaller , the images don't get smaller as in shrink, just less of the last one at the vertical or horizontal end points gets 'cut', that is only that part of it that fits the available space shows the part that 'disappears' is from the right size. Bgimages function the same way in the menu. You are using a bgimage that is curved on the right. You have the item size set to the size of the image, but you are not using it as an image which will keep its size. As a background image when you resize the window skinnier, and therefore the items get skinnier, the right side disappears. There is a fix for it. That is to make the right side of the bgimage straight and use a separator image that is made from your original right curved side. That is what I did and the images are in the zip file.

Another problem, related to that bgimage issue. You have the little black and green boxes as part of the bgimage, well when the page is resized, since they are on the right they will disappear. There's no way to position them to automatically sit just right of the text. So, I removed them from the bg and set them up as images. So, here's the setup now

1. bgimage is curved left and straight right and 300px wide to make sure it is wide enough at higher resolutions [it should probably be 500px and if you want I can make one at that]

2. separatorimage is actually made from the right side curve of the original bgimage, it is 9px wide and because they are included only when there are two items to separate, you will note that the two menus I did, main and manage, have a last item that is only a separatorimage.

3. I created a blank.gif image which is transparent and that is used in those separator only items as the bgimage since you don't want those to have a bgimage.

4. the little black and green boxes are set as image and overimage and the position for them is set to right.

5. I made another arrow, and I set the subimage as position="left"; so that it will appear at the left side of the text. I did that because of putting the image overimages on the right. You could just eliminate the subimageposition='left'; if you want them on the left, but note that the little boxes and the subimage would be pretty close to each other. There is no way to tell the boxes or the subimages to be positioned x pixels from each other. You could make an arrow that had 10, 15, 20px of transparent area to the left side of the arrow, which would make it look like it was that far from the boxes.

Hope this helps. Remember that all menus that use the bgimage will need to have that separator item coded as the last item.



Let me know when you get this as I need to remove your page from my domain.

Ruth

Re: Background Image glitch

Poster: prubin
Dated: Tuesday January 22 2008 - 1:30:11 GMT

I really appreciate your work on this. I clearly understand what you did and it makes perfect sense. I re-shot the images from the original vector material and it looks prety good. Until the window gets so small that the buttons word wrap and the image doubles, but I think I am ok...

Thank you.
Paul.

Re: Background Image glitch

Poster: Ruth
Dated: Tuesday January 22 2008 - 2:00:14 GMT

The only way to fix that is to use css class for the menu and to use divides. It is involved, but I am working on a tutorial to set up those types of images in the menu so that they will always look the same, even if they get really high because of word wrapping or because of the user's need to have much larger fonts. I'll post back here when I get it finished.

Ruth