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.
Using css, this code would do it:
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;
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:
body
{
width: 80%;
margin: auto;
}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:
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:
<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
Hope this will help u up!
<?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>
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.
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.
ahhggg i cant get it to work.
here is the link
www.livingandlegacy.com
if that could help me by posting it...
and help with positioning the google search bar would help too.
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:
#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.
it just choved everything to the right about 500px.
its like it only shows half the page visible on the screen then half of thr rest of the page is pure margin
These are the 'bare' essentials of the CSS centering hack: the width and the margin. If you don't specify a width, the margin trick won't work. If you don't specify the left and right margins as auto the wrapper won't be centered.
You may say: "But I specified a width: 100%!" --- good for you and in truth, your wrapper IS being centered correctly. However, the contents of the wrapper (such as your navigation or content divs) are still aligned to the left since that is the default behavior for elements inside a block.
You can see this behavior by adding border: 1px solid #F00 to your .wrapper div.
Now to fix your problem, you have to specify a width, preferably something slightly greater than the size (or percentage) of the content you put in your wrapper.
Try changing your .wrapper attributes to this:
.wrapper{
margin: 0 auto;
width:1015px;
}Actually, you should start weaning yourself away from absolute positioning (there are exceptions) but your design can be implemented better without it... BAH alright, I'll still fix that search_bar.
Try this:
.search_bar{
float: right;
margin: 50px 80px 0 0;
}hey it worked, i owe you big!
but the search bar fix you gave me puts it in the wrong position.
its like it cant even go to the right spot.
i would like it to be above the links centerd in the white area to the right.
regards ;)
When I check your site, the page still isn't centered. Why is that?
It's size div.wrapper is still 100%. Tell me when you've updated your site so I can see how to fix the search bar.
oh yeah sorry, i am working on a localhost server. ill upload it soon.
>.< Crusty logo image is taking up the whole top portion of your nav div. Set the attributes of your .logo class to this:
.logo{
border-style:none;
float: left;
}Then change your search_bar class to this:
.search_bar{
display: block;
float: right;
margin: 30px 2px 0 0;
}You can tweak the margins to fit your layout... I can't estimate how much margin you want.
thank you you fixed it. and i tweeked the search bar how i wanted it. thank you for your help.
and what mite you suggest i use instead of absolute positioning?
regards
and what mite you suggest i use instead of absolute positioning?
It depends on what your design is. As for your current layout, it can be done with floats and a frequent check at possible values of the display attribute. ;)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.