Hope this is an original question - couldn't find any similar via search.

I have a site desiged with VSD and the problem is that if I change the height of a page, it skews the filled gradient portion of of the background.

My background has a small portion that is gradient filled horizontally forming a sort of header. Only this header region is gradient filled. If I choose to make one of the other pages longer to fit more content, the gradient filled area is stretched out of place.

I have manually worked around the problem by repositioning the gradient positions, but it's a lot of work and not exact.

Here is the example site. http://m-mediaconsulting.com/scratch

The Entertainment page is longer than the others and the gradient area in the header is skewed.

Any ideas are appreciated. Please help.

Create your page then choose the shapes tool. Grab the square and place it where you want it in the page and expand it to the size you want it to be.

Once you have it sized and in place choose the fill tool and select the gradient option, choose your colors and rotate to the desired angle. That should get you what you're after.

You can then add text, graphics whatever you want.

Thank for the reply Bill, but I don't think you understand the issue.

The background fill by gradient is an integral part of the page background function.

> Page Inspector.
> Background Tab.
> Choose gradient, apply gradient to small portion of page.
> Later, change the height of the page.
> notice the gradient section is now skewed.

Perhaps you are suggesting that I use a gradient filled shape instead of color filling the background from page background inspector.

I understood what you were looking to get.

Only the banner at the top of the page is gradient and changing height.

What I was suggesting is you should create your header as an object at the top of the page and then use gradient color and your text on the object. You can now resize the page any way you want and the banner at the top will remain the same size.

Another added benefit to doing it this way is you can now save the page as a template for all your other pages and not have to recreate the entire header every time.

I suppose you could also create a page of just that exact size add all your colors, text and everything, export it to create the HTML code and then just call that from a CSS. Now if you ever want to change it you make the change once and it propagates to all pages without having to make any further changes.

I also noticed that your buttons seem to have a slight color problem too. The first adds a green square under the button, second one a lighter green, third lighter, and the fourth on has a green/yellow/red square while the last 3 don't have anything.

Thanks again Bill. Your suggestion did work like a treat! I suppose I was too hung up on using the page background color tools.

As for the color problem around the buttons, I can explain what is happening there to an extent.

Excuse me for morphing this thread into another topic, but you could think of it as slightly related.

The reason you see those colorations around the buttons is because the other pages of the site are effectively bleeding through each other. I guess it's just how VSD builds the object layers. So the reason you see the green then lighter green etc, is because that skewed gradient described earlier in this problem - which appears on the "entertainment" page, is bleeding through to the other pages.

Now that I have fixed the skewing problem with your suggestion (thanks again), the bleed through problem is still evident on the LAST 3 button of home page only. It is almost as if the background image of the ocean has some transparency applied. I have tried playing with moving the object layers around but I can't seem to shake this problem. Any additional help is appreciated.

I don't think that's it. I don't know what it IS, but when you go to any of the other pages those colors aren't there on the new page.

Is your JPG of the button the size of the button or is it possibly the size of the area that goes weird when you hover over it?

None of my links have ever done anything like that to me. Did you build the menu or use a program to build it for you? If you used a program which one?

Thanks for the reply Bill.

The menu came from using one of the existing VSD templates.... nothing special.

After following your suggestion to use an object for the header, the bleed-thru on the top 5 menu buttons of the homepage is no longer visible. I am sure the colors you saw behind the buttons was from the 1 page where I skewed the background of the page.

Only problem now is how to get rid of the light blue border around the last 3 buttons. As I mentioned, I played with moving the button object layer forwards and backwards, but no luck.

Have a look at the more finished look. http://m-mediaconsulting.com/4cznscruisedev3

You've been busy......

Looks really good. The only things I could see that you might want to work on are minor and I didn't notice them until I started checking a couple of things.

Your menu still has the light blue box on the bottom 3 buttons, but only on the home page.

Your menu remains in the same place except on the entertainment page where it backs up about half an inch.

Neither of these are really bad but I get stuck on little details like that when I'm doing something.

Overall though you did an impressive job on the site.

Thanks Bill.

Can anyone offer any ideas about why the background color from other pages in this site seems to bleed through around the bottom 3 buttons on the homepage ?

Hi,
I have an idea but don't how it will work on your page as I do not have it to try it on. but what if you used an image editor such as Photoshop or something and made the color showing though transparent? you would probably need to rename the code for the buttons gif instead of jpg. or mabe dropping down the image of the boat where the color matches. See the attached wild guess!
Don;t know if it will work just throwing it out there. If you wish to try the buttons you can download them here.
http://www.kellyinfo.com/web/buttonImage.zip