I am new at CSS and have what seems to me a very basic question. How do I make my page fill up the screen, or at least be centered on the screen instead of everything all on the left and empty space on the right?
The page I am working on is at <!-- m --><a class="postlink" href="http://www.southgateschools.com/Acme/index_a.html">http://www.southgateschools.com/Acme/index_a.html</a><!-- m -->
This is my css:
<html>
<head>
<title>Southgate Community School District</title>
<STYLE TYPE="text/css">
<!-- Style_sheet -->
body {
margin: 0; }
div {
width: 100%; height: 100%; }
#topleft {
position: absolute;
top: 5px;
left: 5px;
width: 700px;
height: 100px;
}
#topaddress {
position: absolute;
top: 40px;
left: 5px;
width: 700px;
}
#topmenu {
position: absolute;
top: 123px;
left: 5px;
width: 700px;
height: 19px;
}
#sidenavbar {
position: absolute;
top: 160px;
left: 5px;
width: 145px;
height: 200px;
padding: .5em;
border: medium solid #990000;
}
#side_right {
position: absolute;
top: 160px;
left: 5px;
width: 660px;
height: 200px;
padding: .5em;
}
#newsmenu {
position: absolute;
top: 160px;
left: 157px;
width: 450px;
}
#main {
position: absolute;
top: 170px;
left: 90px;
width: 530px;
}
#bottom {
position: absolute;
top: 510px;
left: 5px;
width: 700px;
}
BODY {body-background:"images/beige169.jpg"}
P {color: black; font-size: 8pt; font-family: Verdana, Arial, Times, serif}
H1 {color: #5A0029; font-size: 9pt; text-align: left; font-family: Verdana, Arial, Times, serif}
H2 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H3 {color: #5A0029; font-size: 14pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H4 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
TABLE {cellspacing: 8; cellpadding: 1;}
TD {font-size: 8pt; font-color: white; font-family: Verdana, Arial, Times, serif;}
a{color:#990000}
a:hover {text-decoration:underline}
a:active {color: #990000}
a:visited {color: #990000}
a:hover {color: #990000; background-color: #FFFFFF;}
</style>
</head>
</html>Use margin:auto;You shouldn't insert CSS rules that are already defined, unless you have a particular reason for it. Anyway, define a width for your body tag, and use "auto" for the left-margin. This will center it. If you can avoid it, never add a "height" of 100% to block-level elements, as 100% is often interpreted as the size of the window, not the size of the actual document. Also I would suggest validating your CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->) before publishing it to the Web.
body {
width: 100%;
margin: 0 auto;
}I changed my body coding to:
#body {
width: 100%;
margin: 0 auto;
}
but nothing changed on screen, it is still all to the left.That's because you're using absolute positioning.
I see, you mean in the other DIV's? So I took out the absolute positions, but now my div's are all over the place.
<html>
<head>
<title>Southgate Community School District</title>
<STYLE TYPE="text/css">
<!-- Style_sheet -->
#body {
width: 800px;
margin: 0 auto;
}
#topleft {
top: 5px;
left: 5px;
width: 800px;
height: 100px;
}
#topaddress {
top: 40px;
left: 5px;
width: 800px;
}
#topmenu {
top: 123px;
left: 5px;
width: 800px;
height: 19px;
}
#sidenavbar {
top: 160px;
left: 5px;
width: 145px;
height: 200px;
padding: .5em;
border: medium solid #990000;
}
#side_right {
top: 160px;
left: 5px;
width: 660px;
height: 200px;
padding: .5em;
}
#newsmenu {
top: 160px;
left: 157px;
width: 450px;
}
#main {
top: 170px;
left: 90px;
width: 530px;
}
#bottom {
top: 510px;
left: 5px;
width: 800px;
}
BODY {body-background:"images/beige169.jpg"}
P {color: black; font-size: 8pt; font-family: Verdana, Arial, Times, serif}
H1 {color: #5A0029; font-size: 9pt; text-align: left; font-family: Verdana, Arial, Times, serif}
H2 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H3 {color: #5A0029; font-size: 14pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H4 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
TABLE {cellspacing: 8; cellpadding: 1;}
TD {font-size: 8pt; font-color: white; font-family: Verdana, Arial, Times, serif;}
a{color:#990000}
a:hover {text-decoration:underline}
a:active {color: #990000}
a:visited {color: #990000}
a:hover {color: #990000; background-color: #FFFFFF;}
</style>
</head>
</html>You need to use floats and margins to position your DIV's. Read more about them at the W3C's CSS2 site (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#propdef-float">http://www.w3.org/TR/CSS2/visuren.html#propdef-float</a><!-- m -->).I don't understand what you said:
"You shouldn't insert CSS rules that are already defined"
What was already defined?You need to use floats and margins to position your DIV's. Read more about them at the W3C's CSS2 site.
__________________
ok, I guess I am in way over my head. I will just stick to my website done in tables (<!-- w --><a class="postlink" href="http://www.southgateschools.com">www.southgateschools.com</a><!-- w -->) until I can read more. yes I know, you all will probably look at that and freak out about my table layout.
ThanksI meant, in your code, you have body { ... } twice, when it should only be in there once, and the property/value pairs combined in the same ruleset.
If you'd like, I can recreate your layout using CSS and floats instead of absolute positioning to give you a feel for the way your CSS/HTML should look. Don't go with tables, you'll just end up spending more money and having to learn CSS later. Learn it now, apply it now.I meant, in your code, you have body { ... } twice, when it should only be in there once, and the property/value pairs combined in the same ruleset.
If you'd like, I can recreate your layout using CSS and floats instead of absolute positioning to give you a feel for the way your CSS/HTML should look. Don't go with tables, you'll just end up spending more money and having to learn CSS later. Learn it now, apply it now.
------------------
I see, yes, that second body thing is from my original css style sheet before I tried to get fancy. I originally used css just for formatting stuff. Then I kept reading all this negative table things and on top of I knew that my home page is slow to load, so I thought I would fix it!!! But, our school district has been using it for 3 years now, with no real complaints about it, so it can stay that way for awhile longer. I only work on this for a few hours a week, the rest of the time I am not a webmaster by profession. The rest of the pages are not so bad, just this one with all their pictures.Everything on the page should be designed with CSS; the only HTML that should be there is the content and the structure of the document difining what types of data are located therein. Hence the common phrase, "semantic (or meaningful) markup."
The page I am working on is at <!-- m --><a class="postlink" href="http://www.southgateschools.com/Acme/index_a.html">http://www.southgateschools.com/Acme/index_a.html</a><!-- m -->
This is my css:
<html>
<head>
<title>Southgate Community School District</title>
<STYLE TYPE="text/css">
<!-- Style_sheet -->
body {
margin: 0; }
div {
width: 100%; height: 100%; }
#topleft {
position: absolute;
top: 5px;
left: 5px;
width: 700px;
height: 100px;
}
#topaddress {
position: absolute;
top: 40px;
left: 5px;
width: 700px;
}
#topmenu {
position: absolute;
top: 123px;
left: 5px;
width: 700px;
height: 19px;
}
#sidenavbar {
position: absolute;
top: 160px;
left: 5px;
width: 145px;
height: 200px;
padding: .5em;
border: medium solid #990000;
}
#side_right {
position: absolute;
top: 160px;
left: 5px;
width: 660px;
height: 200px;
padding: .5em;
}
#newsmenu {
position: absolute;
top: 160px;
left: 157px;
width: 450px;
}
#main {
position: absolute;
top: 170px;
left: 90px;
width: 530px;
}
#bottom {
position: absolute;
top: 510px;
left: 5px;
width: 700px;
}
BODY {body-background:"images/beige169.jpg"}
P {color: black; font-size: 8pt; font-family: Verdana, Arial, Times, serif}
H1 {color: #5A0029; font-size: 9pt; text-align: left; font-family: Verdana, Arial, Times, serif}
H2 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H3 {color: #5A0029; font-size: 14pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H4 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
TABLE {cellspacing: 8; cellpadding: 1;}
TD {font-size: 8pt; font-color: white; font-family: Verdana, Arial, Times, serif;}
a{color:#990000}
a:hover {text-decoration:underline}
a:active {color: #990000}
a:visited {color: #990000}
a:hover {color: #990000; background-color: #FFFFFF;}
</style>
</head>
</html>Use margin:auto;You shouldn't insert CSS rules that are already defined, unless you have a particular reason for it. Anyway, define a width for your body tag, and use "auto" for the left-margin. This will center it. If you can avoid it, never add a "height" of 100% to block-level elements, as 100% is often interpreted as the size of the window, not the size of the actual document. Also I would suggest validating your CSS (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->) before publishing it to the Web.
body {
width: 100%;
margin: 0 auto;
}I changed my body coding to:
#body {
width: 100%;
margin: 0 auto;
}
but nothing changed on screen, it is still all to the left.That's because you're using absolute positioning.
I see, you mean in the other DIV's? So I took out the absolute positions, but now my div's are all over the place.<html>
<head>
<title>Southgate Community School District</title>
<STYLE TYPE="text/css">
<!-- Style_sheet -->
#body {
width: 800px;
margin: 0 auto;
}
#topleft {
top: 5px;
left: 5px;
width: 800px;
height: 100px;
}
#topaddress {
top: 40px;
left: 5px;
width: 800px;
}
#topmenu {
top: 123px;
left: 5px;
width: 800px;
height: 19px;
}
#sidenavbar {
top: 160px;
left: 5px;
width: 145px;
height: 200px;
padding: .5em;
border: medium solid #990000;
}
#side_right {
top: 160px;
left: 5px;
width: 660px;
height: 200px;
padding: .5em;
}
#newsmenu {
top: 160px;
left: 157px;
width: 450px;
}
#main {
top: 170px;
left: 90px;
width: 530px;
}
#bottom {
top: 510px;
left: 5px;
width: 800px;
}
BODY {body-background:"images/beige169.jpg"}
P {color: black; font-size: 8pt; font-family: Verdana, Arial, Times, serif}
H1 {color: #5A0029; font-size: 9pt; text-align: left; font-family: Verdana, Arial, Times, serif}
H2 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H3 {color: #5A0029; font-size: 14pt; text-align: center; font-family: Verdana, Arial, Times, serif}
H4 {color: #5A0029; font-size: 12pt; text-align: center; font-family: Verdana, Arial, Times, serif}
TABLE {cellspacing: 8; cellpadding: 1;}
TD {font-size: 8pt; font-color: white; font-family: Verdana, Arial, Times, serif;}
a{color:#990000}
a:hover {text-decoration:underline}
a:active {color: #990000}
a:visited {color: #990000}
a:hover {color: #990000; background-color: #FFFFFF;}
</style>
</head>
</html>You need to use floats and margins to position your DIV's. Read more about them at the W3C's CSS2 site (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#propdef-float">http://www.w3.org/TR/CSS2/visuren.html#propdef-float</a><!-- m -->).I don't understand what you said:
"You shouldn't insert CSS rules that are already defined"
What was already defined?You need to use floats and margins to position your DIV's. Read more about them at the W3C's CSS2 site.
__________________
ok, I guess I am in way over my head. I will just stick to my website done in tables (<!-- w --><a class="postlink" href="http://www.southgateschools.com">www.southgateschools.com</a><!-- w -->) until I can read more. yes I know, you all will probably look at that and freak out about my table layout.
ThanksI meant, in your code, you have body { ... } twice, when it should only be in there once, and the property/value pairs combined in the same ruleset.
If you'd like, I can recreate your layout using CSS and floats instead of absolute positioning to give you a feel for the way your CSS/HTML should look. Don't go with tables, you'll just end up spending more money and having to learn CSS later. Learn it now, apply it now.I meant, in your code, you have body { ... } twice, when it should only be in there once, and the property/value pairs combined in the same ruleset.
If you'd like, I can recreate your layout using CSS and floats instead of absolute positioning to give you a feel for the way your CSS/HTML should look. Don't go with tables, you'll just end up spending more money and having to learn CSS later. Learn it now, apply it now.
------------------
I see, yes, that second body thing is from my original css style sheet before I tried to get fancy. I originally used css just for formatting stuff. Then I kept reading all this negative table things and on top of I knew that my home page is slow to load, so I thought I would fix it!!! But, our school district has been using it for 3 years now, with no real complaints about it, so it can stay that way for awhile longer. I only work on this for a few hours a week, the rest of the time I am not a webmaster by profession. The rest of the pages are not so bad, just this one with all their pictures.Everything on the page should be designed with CSS; the only HTML that should be there is the content and the structure of the document difining what types of data are located therein. Hence the common phrase, "semantic (or meaningful) markup."