Jump to content

Centering Webpage


Recommended Posts

Hi All,I thought I had this cracked but I am obviously making a mistake somewhere. I wish to center a website on the screen no matter the size of the screen using autowide margins. The site in question is hereWhat am I doing wrong?Any help very much appreciated.ThanksSooz

Link to post
Share on other sites
Hi All,I thought I had this cracked but I am obviously making a mistake somewhere. I wish to center a website on the screen no matter the size of the screen using autowide margins. The site in question is hereWhat am I doing wrong?Any help very much appreciated.ThanksSooz
First of all. i think its a beautiful site.if you give your container these CSS settings. it shouldt work:
#container {	margin-left: auto;	margin-right: auto;	width: 955px; /* Or wathever you need here, as long as there is a width*/}

This only works if your document have a doctype/mads

Edited by madsovenielsen
Link to post
Share on other sites
First of all. i think its a beautiful site.if you give your container these CSS settings. it shouldt work:
#container {	margin-left: auto;	margin-right: auto;	width: 955px; /* Or wathever you need here, as long as there is a width*/}

This only works if your document have a doctype/mads

Hi Mads,Thanks for the quick response. I tried that and I still seem to have the same problem. I am wondering if I have put code elsewhere that is overwriting this. Sooz
Link to post
Share on other sites

do as previously suggested, which is to put all your content in a container div. the add this to its CSS:

#container {  margin: 0px auto;  width: ???px;  //define a width or else it will automatically stretch the width of the page, thus rendering centering meaningless};

and regardless of what techniques you are using in a page, you should always have a Strict DTD'ed page that validates.

Edited by thescientist
Link to post
Share on other sites
do as previously suggested, which is to put all your content in a container div. the add this to its CSS:
#container {  margin: 0px auto;  width: ???px;  //define a width or else it will automatically stretch the width of the page, thus rendering centering meaningless};

and regardless of what techniques you are using in a page, you should always have a Strict DTD'ed page that validates.

I have tried the following code but still no joy
#container {margin: 0px auto;    width: 850px;}

Link to post
Share on other sites

I assume that you added the necessary/complimentary HTML code, right?I guess now it's a matter of asking for a link or some code.

Link to post
Share on other sites

The reason it's not working is because you're using absolute positioning for everything. :)You shouldn't use absolute positioning unless absolutely necessary. From the looks of your layout, I don't think you'll need it at all. Try positioning stuff with margins, padding, display, and float instead. (And make sure you're using a Strict DTD like scientist pointed out)EDIT:@scientist:There's a link in the first post...:)

Edited by ShadowMage
Link to post
Share on other sites
The reason it's not working is because you're using absolute positioning for everything. :)You shouldn't use absolute positioning unless absolutely necessary. From the looks of your layout, I don't think you'll need it at all. Try positioning stuff with margins, padding, display, and float instead. (And make sure you're using a Strict DTD like scientist pointed out)EDIT:@scientist:There's a link in the first post...:)
at least I'm not the only one around here he doesn't always read the first post :)so yeah, ixnay on the positioning-ay, and use the techniques bossman SM suggested. With floats, margins, paddings, and the such, you shouldn't have any problems with centering the pages using the previous techniques suggested.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...