centered css site in all screen resolutions

forry · #1 Feb 19th, 2008, 11:16

Hi, i have recently built a site using html and css.
When i view the site on a screen resolution of 1024px and above it looks fine and the site is centered on the screen.

Whoever, when i view the site in 800px by 600px screen res the site moves to the right and you have to scroll over the the right and down to view the page.

I have used absolute positioning for all elements of the site images, navigation etc.

Is there a way to allow my site to be centered in every screen resolution.

I have tried using a container but it didnt work. does my positioning of all the site elements need to be changed in the style sheet to accomodate the container.

Thanks
Forry

Aso · #2 Feb 19th, 2008, 11:30

Is your site wider than 800px? If so, all browsers whose window is smaller than the site in question, will render it to the left with the ability to scroll right.

forry · #3 Feb 19th, 2008, 11:42

No the site is 800px by 600px.
When its viewed in an 800 by 600 screen res it moves the whole site to the right. its not centered

Thanks

Aso · #4 Feb 19th, 2008, 11:45

Is it possible for you to host the site / send a link? Or if not, post your HTML and CSS.

forry · #5 Feb 19th, 2008, 11:48

ye sure the link is http://www.3dgardendesign.co.uk/

I have just tried it in all res below my screen res of 1280 by 1024.

It looks to me like the site is positioned to absolute position i entered in the css code.

It looks like it doesnt move form its position in 1280 on other screen res

MikeHopley · #6 Feb 19th, 2008, 11:55

Drop the absolute positioning, and use the CSS margin: 0 auto; on your main container.

forry · #7 Feb 19th, 2008, 13:43

Hi, i tried that but still doesnt work.

I dont know if i am doing soemthing wrong in the rest of my css to make the container not work properly

This is my style in the css for the container

#container {
background-color: #232222;
padding: 0;
margin:0 auto;
position: relative;
width: 100%;
height:: 100%;
text-align: center;
}

In the html i have palced the div at beginning of the body and closed the div at end of the body
<body>
<div id="container">

Thanks

Jack Franklin · #8 Feb 19th, 2008, 13:50

Drop the position: relative?

forry · #9 Feb 19th, 2008, 15:03

I tried dropping the position relative. still no joy.
I have been told to add a table and contain everything inside the table.
I dont really want to go down that road of using tables

does anyone have any links on how to design a website that is positioned centered in every screen resolution.

Thanks

Jack Franklin · #10 Feb 19th, 2008, 15:05

NO TABLES!

Just try dropping the text-align center bit.

MikeHopley · #11 Feb 19th, 2008, 15:19

The auto margins method does work. But you need to understand what you're doing. You can't just apply it to any random box and expect it to work.

The things you want to centre must be inside the container <div>
You must specify a width for the container
Your must use a valid doctype
If you're using IE, you must be on IE6 or newer (doesn't work in IE5)

danny322 · #12 Feb 19th, 2008, 15:21

Do u not have to define the width of a div in pxels for margin: 0 auto; to work?

Try changing width: 100%; to width: 800px;

Also, your css u have 2 ':' ----> height:: 100%;

MikeHopley · #13 Feb 19th, 2008, 17:09

You can define the width in any unit (but 100% is obviously useless for centring!).

Jack Franklin · #14 Feb 19th, 2008, 17:45

Yes I was about to say that, if it's width is 100% in essence it is always centered. But you say you have a large margin to the left?

Quote:

when i view the site in 800px by 600px screen res the site moves to the right and you have to scroll over the the right and down to view the page.

Can I see your entire CSS please? Plus the HTML?

Thanks!

Monie · #15 Feb 20th, 2008, 01:31

Don't set your content area a fixed width, make their width in percentage value instead

MikeHopley · #16 Feb 20th, 2008, 07:38

Quote:

Originally Posted by Monie

Don't set your content area a fixed width, make their width in percentage value instead

Even better, use ems.

Monie · #17 Feb 20th, 2008, 07:52

I usually do use em for my font size, but I never used them to specify any of my div elements

What's the advantage of using them Mike?

MikeHopley · #18 Feb 20th, 2008, 08:02

Quote:

Originally Posted by Monie

I usually do use em for my font size, but I never used them to specify any of my div elements

What's the advantage of using them Mike?

The advantage of ems is that you can create layouts that fit any font size. So when users resize the font, everything remains in proportion.

This function is also provided by browser zoom features, but they zoom everything. The most common reason to want zoom is for reading text more easily, not for blowing up images. Font resizing provides a more efficient use of space than whole-page zoom (plus it's faster and doesn't look as ugly).

You don't often see these kinds of layouts, but I really like them. Go to my site, the Badminton Bible, and resize the text. Note how the layout adapts.

You can of course use a combination of layout units. I use mostly ems, then px (for image-related layout), and occasionally %.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
centered css site in all screen resolutions