Okay I'm pretty much satisfied with my site as it is for now. (Other than the two pages that don't work right now, still need to do them)
The only thing that bugs me is that I want the whole thing smack in the middle of the screen with a left and right margin area.
Will this code work?
#content
{
width: 700px;
margin: 0 auto;
}
If so how and where in the code of the page would I incorporate it so it will work and do what I want?
Example of what I'm wanting to do....<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic center page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
html, body {margin:0;background:#9cf;text-align:center;}
#container {margin:0 auto; width:700px; text-align:left;}
#contents {background:#fff;border:1px solid red;}
-->
</style>
</head>
<body>
<div id="container">
<div id="contents">
<p>contents</p>
</div>
</div>
</body>
</html>Well yeah... you might want to add 'position:relative' to it and make sure you actually have a div called 'content' that wraps your site though...
Okay I've tried using that code and my page isn't moving at all. Can someone look at the source and see what I'm doing wrong? Probablysomething really obvious to those of you that are good at css. Take a look for me please.
Graphic Ills (<!-- m --><a class="postlink" href="http://www.graphic-ills.com">http://www.graphic-ills.com</a><!-- m -->)Try using margins to center it. Ex:
#container (or .container, whichever you use)
{margin-left: 200px; margin-right: 200px;}
Just increase the pixels in the CSS to make it more centered (that is, if it works).It moved! lol Well I inserted the code as you suggested but isn't there a way to make an auto thing? You know depending on the screen settings of the user. So it auto adjusts and centers itself to whichever screen you may be viewing it on.Set the width then use margin: auto, as in the example I gave.Well damn I did forget one little thing fang from your example. lol And guess what? It works! As if you had any doubts huh? It's centered and it looks better I think. Thanks! Will be doing a few more things tomorrow.
The only thing that bugs me is that I want the whole thing smack in the middle of the screen with a left and right margin area.
Will this code work?
#content
{
width: 700px;
margin: 0 auto;
}
If so how and where in the code of the page would I incorporate it so it will work and do what I want?
Example of what I'm wanting to do....<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic center page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
html, body {margin:0;background:#9cf;text-align:center;}
#container {margin:0 auto; width:700px; text-align:left;}
#contents {background:#fff;border:1px solid red;}
-->
</style>
</head>
<body>
<div id="container">
<div id="contents">
<p>contents</p>
</div>
</div>
</body>
</html>Well yeah... you might want to add 'position:relative' to it and make sure you actually have a div called 'content' that wraps your site though...
Okay I've tried using that code and my page isn't moving at all. Can someone look at the source and see what I'm doing wrong? Probablysomething really obvious to those of you that are good at css. Take a look for me please.Graphic Ills (<!-- m --><a class="postlink" href="http://www.graphic-ills.com">http://www.graphic-ills.com</a><!-- m -->)Try using margins to center it. Ex:
#container (or .container, whichever you use)
{margin-left: 200px; margin-right: 200px;}
Just increase the pixels in the CSS to make it more centered (that is, if it works).It moved! lol Well I inserted the code as you suggested but isn't there a way to make an auto thing? You know depending on the screen settings of the user. So it auto adjusts and centers itself to whichever screen you may be viewing it on.Set the width then use margin: auto, as in the example I gave.Well damn I did forget one little thing fang from your example. lol And guess what? It works! As if you had any doubts huh? It's centered and it looks better I think. Thanks! Will be doing a few more things tomorrow.