How do I center my website. For all screen resolutions

Forum Moderators: open

Message Too Old, No Replies

How do I center my website. For all screen resolutions

midi25

5:24 pm on Mar 26, 2004 (gmt 0)

Hi I created a website the other day in 800x600. Everything looked fine. Until I tested it on a 1024x768 17" tft. My website was not even able to fill half the screen. How can I center my site so that it always stays centered. At the moment it looks like its stuck on the top left of the screen.

Are there any good tutorials around that can help me resize for various screen resolutions.

Thanks

HelenDev

5:29 pm on Mar 26, 2004 (gmt 0)

all the website content here

</div>
</body>

isitreal

5:46 pm on Mar 26, 2004 (gmt 0)

Or if you want it to be standards compliant, use this in your stylesheet:

body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}

the body thing makes it work in IE, the margin:0 auto; makes it center in most other browsers.

you might have to go in and reset some of your main containers to text-align:left; because the body text-align:center sometimes cascades down into the site content, but you can counteract that by adding

text-align:left;
to #mainContainer

burrito

8:01 am on Apr 16, 2004 (gmt 0)

If you're using frames you might wanna keep the website on 800x600 entirly so you won't be able to use the standard <center> or <div align="center"> tags..

instead you could place the whole page in a frameset:

Do keep in mind your website isn't 800x600, infact it'll be around 796x500 or even less... find a middleground and you'll be set to go... do create the blank html page, either in the website background or completely different color, whatever you like...

Personally I wouldn't recommend doing your page like this but it would work... I'd try to get a page to work in all resolutions and if that doesn't work, do it for 1024x768 because I think that's being used to most nowadays

R1chard

11:23 am on Apr 16, 2004 (gmt 0)

Some screens have a width of 72 pixels, and some have a width of 2000 pixels, so be careful... It's probably best not to create a website in any fixed resolution, so that it can adapt.

burrito

4:19 pm on Apr 16, 2004 (gmt 0)

that's what I said too.... nevertheless is what I said a way to have the page displayed in a specific resolution all the time.

BTW, that way the frames will adapt to smaller sizes too, and create sort of widescreen bars for bigger resolutions

Khemikal

9:13 pm on Apr 20, 2004 (gmt 0)

This is what I used to center pages via CSS. There may be better methods, but this works in all browsers so far for me:

body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}

or set body width to 100% and then just make a container div for your page

#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}

Khem

MrCrowley

10:10 pm on Apr 20, 2004 (gmt 0)

You might also want to center vertically...
<BODY>
<TABLE border=0 width="100%" height="100%"><TR><TD align="center" valign="center">
800 X 600 table goes here
</TD></TR></TABLE>
</BODY>

As you see, this is plain old html whitout css, but it works fine WITH a loose doctype. Doesnt woork with strict.

Please note that the other ways to do the alignment (with text-align:center, and except for Khem's post) align the text in the center, which may not be what you want. Maybe you want left-aligned text inside a 800X600 space in the middle of the screen. This is what my example is for.

I sometimes have problems with the alignments in css, as some tags are interpreted dfferently one different browsers.

I know that the align attributes are no more 'legal' in html, but they can still be useful since they work!

smokeyb

10:22 pm on Apr 20, 2004 (gmt 0)

I wouldn't use frames to do this, but the table will work. You could then reformat the text and object's positioning within the table, and set the table's width to 90% instead. Then your page will resize depending on the users screen resolution whatever it is.

Khemikal

12:01 am on Apr 21, 2004 (gmt 0)

Ahhh my esteemed colleague Crowley pointed out something I do unconsciously. You will definitely have to add a text-align: left; to your css for any areas where you will have text unless you want your text to center vertically.

Khem

sosidge

2:02 pm on Apr 21, 2004 (gmt 0)

Mr Crowley - I'm trying that vertically centered trick... and it's not working...

Is my CSS clashing?

Here is what I beleive to be the relevant code at the top of the page...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
 background-color: #dddddd;
 margin:0;
 }
</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td align="center" valign="middle">
 <table width="780" border="0" cellpadding="0" cellspacing="0" align="center">

All tags are closed at the bottom of the page.

I'm not having much luck with HTML at present - any ideas why this bit is also stumping me?

Thanks.

MrCrowley

2:39 pm on Apr 21, 2004 (gmt 0)

Hi,

Sorry, I forgot... here is Microsoft say about the body tag (taken from MSDN) : When you use the!DOCTYPE declaration to specify standards-compliant mode, this object no longer represents the entire surface onto which a document's contents can be rendered. The object can obtain its size from its content, or you can set its size explicitly�like a div object.

The width and height css styles are not supposed to be applied to the body tag, but you have to apply it (width:100%; height:100%;) in order to align vertically. Otherwise, as MS say, the body will not have the length of the window, but the length of the content.

I know this is not an ideal situation, and it won't work in Netscape 7 or Firebird / Firefox. If you want to align vertically, you have to drop the doctype, then you don't need to add the width and height attributes to the body, which don't work anyway in the best (but not most popular!) browsers.

Dropping the doctype makes your HTML illegal from the w3c's point of view. Anybody can comment the implications of doing so?

But, keep in mind that if the vertical center alignments works in IE, the styles you have to add don't make the page not-dispplayable by other browsers. The tags are just ingored by other browsers.

So my advice, add the width and height to the body style, as long as the design is not destroyed if the alignment don't work. If the design depends heavily on vertical center alignment, consider a change of design!

By the way, you could add a 100% height to any tag inside the body (div for example) and it won't do any good. All the relative heights depend on the top-tag, which is body. And this one in return depends on the length of the content. An absolute height (800px for example) won't do it either since you have no idea of the user's screen height.

A simple problem made complicated :)

sosidge

4:31 pm on Apr 21, 2004 (gmt 0)

Thanks very much for your reply!

So - I did this to my CSS...

<style type="text/css">
body {
 background-color: #dddddd;
 margin:0;
 width: 100%;
 height: 100%;
 }
</style>

And I got a vertically centred page... in IE6.

And I got a top aligned page in Opera and Netscape...

I think I'll stick to a more universal appearance, and keep the page in question at the top in this case.

I've already been told off once on this forum for commenting out the DOCTYPE...

Thanks for your help though - I'm learning more every minute.