/    Sign up×
Community /Pin to ProfileBookmark

How to autocenter whole page or set width of background automatically

Copy linkTweet thisAlerts:
May 28.2009

On my webpage, right now I start everything from the left of screen. Please look at my webpage at robotdukkani.com. And I put a blue background at the right, just to cover the empty area on the right, just wide enough for not to cause left-right scroll bar to appear at the bottom (at least for my wide laptop screen).

I have two independent questions:

1-How can I center the whole page automatically no matter what screen a visitor uses? If I can do it, I will eliminate the blue background at right.

2-If I want to keep layout this way, for my wide laptop screen the blue background is just wide enough (it is a fixed width that I set) to cover the rest of the area on the right and it is fine…However, for a narrower square screen, the blue backgorund (for that same width I had set) on the right is causing a left-right scroll bar at the bottom. How can I automatically set the width of the blue background at the right, so that it will fill the user’s screen just enough but not cause any left-right scroll bar no matter how wide screen he uses?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@bluestartechMay 28.2009 — i usually make the hard decision and go with an alignment that works best on numerous configurations
Copy linkTweet thisAlerts:
@aj_nscMay 28.2009 — It's quite simple to automatically center the content of a page on all browsers.

1 - Use a wrapper div around all your content

[code=html]
...
<body>
<div id="wrapper">
<!-- content here -->
</div>
</body>
...
[/code]

2 - Using CSS, give the wrapper div a margin of 0 auto and give it some sort of specified width (can be a percentage for a fluid layout, px or em, for a fixed layout, etc)

<i>
</i>#wrapper {
margin: 0 auto;
width: 75%;
}


As for the problem you are experiencing with your blue background, take your background image, and chop it down to a miniscule 1px width. Then apply the CSS rule below:

<i>
</i>body {
background: #020789 url(your/background/image.jpg) 0 0 repeat-x;
}


That will tile the 1px background horizontally across the entire width of the visitors window. The #020789 is the color at the bottom of the gradient, so basically, you just need to chop your background image down to 1px width and whatever height is needed so that the color at the bottom of the image is #020789 and the declaration of #020789 in the CSS rule will fill any any part of the page that is longer than your image with that color so everything will look seamless.

IMORTANT EDIT:

Don't expect any CSS that you put into the page to work as it is supposed to unless your HTML validates - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Frobotdukkani.com%2F

Just glancing at the code I noticed two opening body tags in different places.....very big no no.
Copy linkTweet thisAlerts:
@ketancoauthorMay 31.2009 — It works to some degree. First of all can you explain what are the 0 0 in your css code before repeat-x?

ALso, the css code background: url('pictures/mbg1.jpg') repeat-x 0 0; correctly fills the remaning screen area on both wide and narrow screens. However, for the narrow screen, alhough only the remaining part of the screen is filled, there is still the left-right scroll bar at the bottom of the screen. And whan you scroll to the right, the remaining area for the narrow screen looks white (as only enough portion was filled with bacground color, so the remaining on the right is white, but why is there a remaining distance there so that a bottom scroll bar appears?)


With firefox by the way, only the 1px width appears, how can you make repeat command work with firefox?
Copy linkTweet thisAlerts:
@ketancoauthorMay 31.2009 — also one more question. the image, before i modified to 1px, was about 2300 bytes. Now the 1px image is about 300 bytes. when you consider the image repeats horizontally about 300 times or so, does it mean the whole loaded quantity is about 300x300 which is 90000, much more than the original 2300 byte single image? (I am asking as I am concerned about page loading speed)
×

Success!

Help @ketanco spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...