Banner not working right

[grabenair]

On my website I wanted my banner to go all the way across the page, I figured out how to that. My problem is that when I view it on a screen that you have to scroll left and right the right side does not go all the way across.

Edited November 23, 2011 by grabenair

[falkencreative]

Either you misspelled your domain name or your hosting is down at the moment?

[danhodge]

im guessing its http://www.freewebdesigningreference.com/, as this was shown in another topic too.

 

And it does go all the way across for me...

[grabenair]

Sorry

Edited November 23, 2011 by grabenair

[grabenair]

Yes it does go all the way across except when you view it on a monitor 15in then you have to scroll to the right and then it disappears.

[grabenair]

Andrea and Ben just thought I would let you know you are awesome!!!!!!!!!

[Andrea]

I haven't figured out how to fix this. But it has nothing to do with the size of your monitor but with the resolution that's set (yes, you won't be able to display 1900 px on a 15", but even a 15" monitor will let you set various resolutions. And the 100% you have set for your banner cover that resolution, but not the area you're scrolling to if the page is wider than whatever set resolution.

 

I'm sure it's something simple, it always is.....

[newseed]

I have to agree with Andrea. The 15in monitor probably will only support up to 1024 resolution but its probably set to 800 which would explain why there is a horizontal scroll because your #wrapper div is set for 960px.

[Andrea]

Eddie, what's weird is that the top banner goes 100% --- UNLESS the resolution is lower and doesn't allow to display the entire page. So when horizontal scrolling is needed, the banner blue stops where the scrolling begins. - the area of the page that isn't seen unless scrolled to does not have the blue banner.

 

I've never had this issue, as I usually limit my header design to the wrapper area, so I have no clue how one would get the banner cover all the width, regardless of scrolling or not.

[newseed]

Without looking at the site again, I vaguely remember that the header (banner) was outside of the wrapper. That banner is set using the css background which is centered.

[Andrea]

He has a header div with a 100% width a blue background and the image centered sitting above the wrapper so that there's a blue banner all the way across the top. But if the page is viewed with a resolution less than wrapper width and a horizontal scroll bar pops up, using that scrollbar shows that the header-blue ends where the page ended.

[newseed]

Oh..I see. The width of 100% would be whatever the browser size is regardless if there is a scroll or not. Think about it, if the wrapper div uses a 100% width then it would fit the width of the browser window thus no scroll.

 

So the banner is displaying the full width of browser window as it should but it doesn't understand how to expand beyond that of a fixed width that is greater than the browser window size.

Edited March 9, 2011 by Eddie

[Andrea]

So the banner is displaying the full width of browser window as it should but it doesn't understand how to expand beyond that of a fixed width that is greater than the browser window size.

That's how I see it, too - but is there a way to work around this?

[newseed]

Yes. Just make the body background have a blue bar that matches the height of the banner. However, since he's using the body already, he could move the body's background image to the html and then apply the new blue bar to the body.

[Andrea]

Thanks Eddie - that one had me puzzled - didn't think about using the html tag.