Css absolute positioning of hidden scrollbars ... with swirl

Question

I am working on a website that is rated at 1024 X 768 as the minimum resolution. So, we have about 970 pixels. The design returned with an interesting layout with a centered website with a banner that actually exceeds this width (more precisely, 1288 pixels), which will look good for users with high resolution, but looks great at 1024.

So, to prevent the scroll bars from showing for those with 1024, I completely placed the banner and used overflow-x: hidden on the body. This works great in our target browsers.

Now the client has returned and asked for scrollbars to be present for users on 800 X 600 (yes, this is not the goal) so that they can see the critical login button.

How can this be placed for these 2% of their users without radical changes? All I can think of is to detect their screen width and remove the overflow-x: hidden.

You must love when requirements change at the end of the assembly process!

Change - that’s what it seems to me, that seems to me quite simple - any reservations here?

if (screen.width < 1024) { $("body").css("overflow-x", "visible"); } 

Answer 1

How to split a banner into three parts.

• The left side exceeds 800 pixels.
• Center 800 pixels.
• Right side for 800 pixels.

Then install overflow-x: hidden; only for 1 and 3.

Thus, if the center of 800 pixels is cropped, they will get a scroll bar. If the user can see, say, 1100 pixels, but not the entire banner, they won’t get a scroll bar.

Answer 2

I would say your idea of ​​determining the width of the screen and then removing overflow-x: hidden is probably best. This should be pretty simple to do with some javascript.

Answer 3

How about something like this ( try it )? The latter selector is at least minimally compatible with IE 6. Of course, you must adjust / reduce the minimum width that I specify so that it works best with your layout.

 html { margin: 0; overflow: auto; padding: 0; } body { margin: 0; min-width: 1024px; overflow-x: hidden; padding: 0; } * html body { width: 1024px; } 

Answer 4

You can use a <div> with the background image for the banner instead of <img> :

 <div style="background: url(/images/banner.jpg) no-repeat center top;"/> 

<div> will take care of clipping, overflow and size issues, and you won’t need a bunch of overflow hacks.