Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 1576

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Dec 28th, 2008

center the page? help

Expand Post »

i have a webpage that i built on my computer. a 1024x768 reslolution screen is what i used. but when i use a bigger monitor, the page is the same size, but its pushed up against the left side of the monitor.
could somebody tell me the way to always keep it in the center nomatter what size screen is being used to view the page?

thanks in advance.

Similar Threads

Align floated images in center of page with CSS in HTML and CSS
Why does text wrap around from middle of page? in Windows Software
Table in center of page? in HTML and CSS

sacarias40

Reputation Points: 11

Solved Threads: 4

Junior Poster

Offline

113 posts
since Nov 2008

Permalink

Dec 28th, 2008

Re: center the page? help

Using css, this code would do it:

(Toggle Plain Text)

position:absolute;
left:50%;
margin:The number here should be negative half your pages width;

Meaning if your page were 200px wide, the code would be:
margin:-100px;

ccube921

Reputation Points: 13

Solved Threads: 6

Junior Poster in Training

Offline

93 posts
since Oct 2008

Permalink

Dec 28th, 2008

Re: center the page? help

Click to Expand / Collapse Quote originally posted by sacarias40 ...

i have a webpage that i built on my computer. a 1024x768 reslolution screen is what i used. but when i use a bigger monitor, the page is the same size, but its pushed up against the left side of the monitor.

Why don't you just let the page fill the browser window no matter what size it is? That's what a browser does by default. If your page doesn't do that, you have done something to prevent it, like giving a fixed width for your content.

If you always want to have a margin on your page, give the body (or main div) a width and margin: auto:
css Syntax (Toggle Plain Text)
body
{
 width: 80%;
 margin: auto;
}
body { width: 80%; margin: auto; }

cfajohnson

Reputation Points: 25

Solved Threads: 23

Junior Poster

Offline

193 posts
since Dec 2008

Permalink

Dec 29th, 2008

Re: center the page? help

The most popular way of centering your content is to put your whole body in one div with and id (ie container) and add this in your css code:

HTML and CSS Syntax (Toggle Plain Text)

div#container
{
margin: 0 auto;
width: (the width you want, could be in %, px, or em)
}

The margin attribute can have 2, 3, or 4 values. If it contains just 2 values (like in the example above), the first value is for the top and bottom margins and the second value is for the left and right margins.

When you specify 'auto' whatever space is not used by your width gets divided into two. So if your layout is 800px and the screen width is 1000px, the 'auto' value makes a 100px margin on the left and right side.

FOR CURIOSITY'S SAKE...
Just for reference, the html's body looks like this:

HTML and CSS Syntax (Toggle Plain Text)
<body>
<div id="container">
 
... all the content stuff here...
 
</div>
</body>
<body>
<div id="container">

... all the content stuff here...

</div>
</body>

When you use 4 values in your margin attribute, they are specified in the following order: top, right, bottom, left (clockwise from the top). I can't remember what's the 3-value for. hehe

kanaku

Reputation Points: 70

Solved Threads: 15

Posting Whiz

Offline

378 posts
since Jan 2007

Permalink

Dec 29th, 2008

Re: center the page? help

Hope this will help u up!

html Syntax (Toggle Plain Text)
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Centering The Page</title>
<style type="text/css" media="all">
/* <![CDATA[ */
@media screen {
html, body {
     height: 100%;
     min-width: 800px;
     max-width: 1024px;
     width: 100%;
}
 
body { 
     background-color: #eee;
     color: #000;
     text-align: center;
}
 
body #wrapper {
     background-color: #fff;
     border: 0;
     color: inherit;
     height: 100%;
     margin: 0 auto;
     max-width: 1000px;
     text-align: left;
     width: 100%;
  }
}
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Centering The Page</title>
<style type="text/css" media="all">
/* <![CDATA[ */
@media screen {
html, body {
     height: 100%;
     min-width: 800px;
     max-width: 1024px;
     width: 100%;
}
       
body { 
     background-color: #eee;
     color: #000;
     text-align: center;
}

body #wrapper {
     background-color: #fff;
     border: 0;
     color: inherit;
     height: 100%;
     margin: 0 auto;
     max-width: 1000px;
     text-align: left;
     width: 100%;
  }
}
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Dec 29th, 2008

Re: center the page? help

Use the method in poist #4 for horizontal centering.

Negative values in styles are not standard, and don't always work.

There is no reliable way to center content vertically on a page that works on all browsers, screen resolutions, and window sizes. Stop trying to do that. Just put a top margin on the content, and let the bottom fall where it will.

Never use pixel sizes to define anything. Use points for text, and percent for object sizes.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Dec 30th, 2008

Re: center the page? help

thank you guys for your help i believe i will try the 4th post because it looks most easy and practical.
once more thank you again.

sacarias40

Reputation Points: 11

Solved Threads: 4

Junior Poster

Offline

113 posts
since Nov 2008

Permalink

Dec 30th, 2008

Re: center the page? help

ahhggg i cant get it to work.
here is the link
www.livingandlegacy.com
if that could help me by posting it...

sacarias40

Reputation Points: 11

Solved Threads: 4

Junior Poster

Offline

113 posts
since Nov 2008

Permalink

Dec 30th, 2008

Re: center the page? help

and help with positioning the google search bar would help too.

sacarias40

Reputation Points: 11

Solved Threads: 4

Junior Poster

Offline

113 posts
since Nov 2008

Permalink

Dec 30th, 2008

Re: center the page? help

Change your wrapper div on the page to <div id="wrapper"> and in the CSS file set fixed width and margin, which will have value 0 auto.

Try this:

css Syntax (Toggle Plain Text)
#wrapper {
        width: 1000px;
        height: auto;        
        margin: 0 auto;
}
#wrapper {
        width: 1000px;
        height: auto;        
        margin: 0 auto;
}

Edit: I don't know, whether it will work, because on page is relative and absolute positioning for main parts of design.

Last edited by lio04; Dec 30th, 2008 at 1:48 pm.

lio04

Reputation Points: 27

Solved Threads: 4

Junior Poster in Training

Offline

73 posts
since Mar 2008

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Need Help!!! Internet Explore not reading my webpage...

Next Thread in HTML and CSS Forum Timeline: Need Help in HTML

DaniWeb Message

Cancel Changes

User Name
Password