1 reply to this topic

[niftyballoons]

Hi there,

I have a layout design (created by my wife) that integrates the branding image into the design of the page, such that the branding image looks like the top of a border that goes around the entire content area.

 

I achieve the look by using a border background image around the div.fullwidth.fix container. I also canceled out the padding so that the elements rest right on top of each other. Then I uploaded a header logo that fit right on top of the content area to complete the look.  See here (note the colors are off as we redo the design slightly)

 

Please Login or Register to see this Hidden Content

 

Here's my problem. When you shrink the size of the window, the header image shrinks at a different rate (the margins on the side are slightly different) and it ends up with a white gap below it. Is it possible to make the margins on the side of the branding image the same as that of the div.fullwidth.fix container and to make the image sit on the bottom of the header to avoid the white space underneath?

 

Thanks   

[Rob]

If some element is 1000px wide by 500px high and it's re-sized by half, it will be 500x250. But, if you have a different element on the same site that's 847x303, when re-sized by half, there's going to be a discrepancy in size because the proportions have to adjust.  Browsers won't show 423.5 x 151.5 pixels, so they'll adjust to 424x152.  That little difference can throw an alignment of elements out of proportion. Since the elements are not aligned correctly, odd things like empty spaces show up.

 

When designing the graphics, proportions must be considered so that when scaled, each element remains in the same scale or proportional size. The margins, padding and other components can make things scale out of general proportion as well.