• 0

How can I center the user's screen over my website?


Question

I've got a design which is 1032px wide which means that on a 1024x768 screen an annoying horizontal scrollbar will appear.

The entire design is 1032px wide but the actual content that needs to be seen is slightly less than that (about 960px). The excess width is due to fancy borders etc which aren't really that important.

My question is, is there a nifty way of telling the browser that if the page is too wide, it's fine to crop a certain number of pixels from either side rather than putting in a horizontal scrollbar?

Here's what currently happens:

post-310118-12901137801019.jpg

And here is what I would like to happen:

post-310118-12901137764997.jpg

Thanks

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

Set your site width to 100% while setting your content width to 960 or whatever.

This will give you a minimum content width of 960, while expanding or shrinking the outer border (site width) to fit their browser width.

Link to comment
Share on other sites

  • 0

You would center is using margins.

 #wrapper {
   width: 960px;
   margin: 0 auto; /* top/bottom, left/right */
 }

What I have is 'shortcode' for margin. 0 is for top AND bottom and auto is for left and right.

Longhand would look:

 margin: 0 auto 0 auto; /* top right bottom left */

You can use either but when you have duplicates, you can combine them to minimize your code ;).

Link to comment
Share on other sites

  • 0

If you use margin: auto, it'll center the design. you'll have to use overflow: hidden to not get the horizontal scrollbar but if someone has a lower resolution it'll just get cut off.

Link to comment
Share on other sites

  • 0

Set the background of the page to the normal background plus fancy borders then set your main content/wrapper to the width of the main content.

So long as the main content isn't bigger than the browser window this will stop the borders causing scrollbars on the page, use Cupcakes method of centring the main wrapper as this is by far the best.

Link to comment
Share on other sites

  • 0

If you use margin: auto, it'll center the design. you'll have to use overflow: hidden to not get the horizontal scrollbar but if someone has a lower resolution it'll just get cut off.

Using overflow: hidden is unwise as that would hide both x and y overflows. Not that I recommend it but you would instead use overflow-x: hidden. For accessibility's sake, you shouldn't prevent people from scrolling no matter what.

Link to comment
Share on other sites

  • 0

You would center is using margins.

Better suggestion than mine, I never really dug into CSS much personally, but if you can use CSS to do what you need to, than do it. It makes the code more robust (as long as a browser supports CSS properly) and easier to manage.

Link to comment
Share on other sites

  • 0

Set the background of the page to the normal background plus fancy borders then set your main content/wrapper to the width of the main content.

So long as the main content isn't bigger than the browser window this will stop the borders causing scrollbars on the page, use Cupcakes method of centring the main wrapper as this is by far the best.

Unfortunately my background image is in a div, not the body tag. I have to set this div to 1032px wide otherwise the background image is not fully displayed on screens that are large enough.

I can't change it so that the background image is on the body tag. I could give you a long list of reasons why not but suffice it to say, it's not possible for this design.

Link to comment
Share on other sites

  • 0

Well if you happened to see what I posted a little while ago that doesn't work. I think you are stuck with a js based solution.

I feared as much... Probably not worth it then. If Javascript is involved in the layout of the page it almost always means it's a hack and therefore isn't a good idea.

Link to comment
Share on other sites

  • 0

If you want to keep the background image in it's on <div>, then add some CSS to the div

position: absolute;

top: 0;

left: (width of the div)px;

margin-left: -(half the width of the div)px;

z-index: -1;

That should make it 'act' like a background image in the body, where it won't count as any 'flow' of the page for the browser, so if it's to wide, it won't force scrollbars.

Link to comment
Share on other sites

  • 0

If you want to keep the background image in it's on <div>, then add some CSS to the div

position: absolute;

top: 0;

left: (width of the div)px;

margin-left: -(half the width of the div)px;

z-index: -1;

That should make it 'act' like a background image in the body, where it won't count as any 'flow' of the page for the browser, so if it's to wide, it won't force scrollbars.

Tried that, didn't work.

Maybe it's best if I just show you the page I'm talking about: Link

Link to comment
Share on other sites

  • 0

I don't see a background image. Besides what do you mean by "hack" ?

The background image isn't on the body tag, it's in a div.

If you're solving this with Javascript, it'll be deliberately interrupting the flow of the page and changing the display - something which shouldn't really be done by Javascript. So I'd label it a hack.

Link to comment
Share on other sites

  • 0

I would agree with you if you are trying to do something to prevent the user from doing something he would be usually able to do. It also would be the case if the site becomes unusable/disabled when js is disabled. In this case it is really helping the user center the layout which otherwise he/she would have to do themselves. So it is an enhancement rather than a hack.

I said I don't see a background because the background image as you have mentioned earlier is a lot wider than the width of the content which is not reflected in the page. Perhaps I am missing something.

Link to comment
Share on other sites

  • 0

I said I don't see a background because the background image as you have mentioned earlier is a lot wider than the width of the content which is not reflected in the page. Perhaps I am missing something.

I'm confused... Is this the site you are seeing?

post-310118-12902123830508.jpg

Link to comment
Share on other sites

  • 0

Looking at the design, the extra width is pretty arbitrary. You could easily nix the drop shadow you have on the main container and set the grungy container background as the body background itself (it would look much better than what you have right now). Or reduce the padding (which your header is already uneven--you have more padding on the left than you do on the right where your form is at.)

Have you looked at stats for the site you designed for? Are there a lot of users that use >1024 that you need to worry about this? If so then perhaps you should just shave off the extra 8px.

Link to comment
Share on other sites

  • 0

The design of the site isn't up for negotiation. I'm simply looking to find out if what I'm asking is technically possible.

I'm fully aware that if it's not, I can redesign the site, I can work that much out myself.

I asked the question out of curiosity rather than anything else.

Link to comment
Share on other sites

  • 0

And the way to "make it possible" is to actually design for the specs you're obviously needing since you brought it up.

I'm not going to get into an argument about this - either you have an answer to my original question, or you do not. If it's the latter, don't post.

Thank you for your previous contributions to this thread, but I don't need advice on how to design a website, I'm not an amateur.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.