After thinking a bit more about this, what I probably need to use is a
media query, that aligns the banner either to the left or in the
center based on the screen size.
- Koen
On Sun, Oct 7, 2012 at 10:56 PM, Jay Tanna <jta...@rocketmail.com> wrote:
>
>
>
>> I'm building a website using
>> responsive design and HTML5 and would
>> like the content not to exceed the width of the banner in
>> the header.
>>
>> The banner was provided by the client, and I am using the
>> following
>> code to implement it:
>>
>> background: url("../images/banner.png")
>> left no-repeat;
>>
>> Now if the window becomes large, the text in the content
>> becomes wider
>> than the banner on the right side.
>>
>> If I use:
>>
>> background: url("../images/banner.png")
>> center no-repeat;
>>
>> the banner gets cut on the left side if the window is small,
>> and an
>> important section of it gets cut off, which I don't want to
>> happen. I
>> already tried max-width for the content, but that doesn't
>> work either.
>>
>> How do I make sure that the content becomes not wider than
>> the width
>> of the banner, preventing the banner gets cut on the left
>> side?
>>
>
> Without knowing your HTML structure, I can only give you the outline of how
> it could be done:
>
> <div id="container">
> <div id="header">Banner/Header</div>
> <div id="wrapper">
> <div id="left">Left</div>
> <div id="content">Content</div>
> <div id="right">Right</div>
> </div>
> <div id="footer">Footer</div>
> </div>
>
> Now you can set the width of the container and everything falls into line
> with it. Set the width to match the width of the banner taking account of
> any paddings, borders and margins of other elements.
>
> Hope this gives you the idea.
>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
