At 12:14 AM 7/21/2006, David Sharp wrote:
>>I actually originally had the background image on the header, but when I
>>did that, it created a white space between the header and the subheader
>>that I couldn't figure out how to get rid of. When I moved the background
>>image to the wrapper, that's when the white space disappeared.
>>
>
>The white space is the bottom margin of div#header h1. Because the margin
>of #header is 0, this margin sticks out past the header creating the
>unsightly gap. padding-bottom on the #header would be a better solution.
>>Even if the image was moved into the header, wouldn't the text squeeze
>>out anyway when the browser is shrunk significantly b/c the image is a
>>fixed size?
>>
>Perhaps the pattern you currently have could fade to a solid colour at the
>top. Then give the #header this colour, and position your background image
>at the bottom.
>div#header {
> background : #333333 /* or whatever your colour is */
> url(whatever.gif) bottom left repeat-x;
>}
>This way your page will look "ideal" at the default text size, but will
>still look pretty good when text is bumped up.
>Alternately you could make the background bigger than it needs to be - due
>to the nature of the "N" taking space from the top and bottom (as will be
>the case at default text size) will leave it still looking like an "N". In
>this case align the background with the center of the header using
>{background-position : 0% 50%}. In this case I would still give the header
>the solid background colour in case the text is bumped higher than your
>image can handle.
>
>I think the key is to allow the page to accommodate changes gracefully -
>it won't always look pixel perfect. But your site is looking really good.
>I wish my first sites looked half as decent!
>
>Hope this helps.
>D#
Hi David,
Thanks so much for the helpful tips. I just implemented them and it looks
great! I moved the background to the div#header,and adjusted the header
margins/padding. Also used your first suggestion of setting a background
color behind the image, and I think it looks perfectly adequate for
significantly resized windows.
Very grateful for your help,
Janet
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
