/    Sign up×
Community /Pin to ProfileBookmark

How to fill up the screen?

Copy linkTweet thisAlerts:
Sep 02.2004

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 [url]http://www.southgateschools.com/Acme/index_a.html[/url]

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>

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@rsdSep 02.2004 — Use margin:auto;
Copy linkTweet thisAlerts:
@JonaSep 02.2004 — [font=trebuchet ms]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 [url=http://jigsaw.w3.org/css-validator/]validating your CSS[/url] before publishing it to the Web.[/font]

<i>
</i>body {
width: 100%;
margin: 0 auto;
}
Copy linkTweet thisAlerts:
@thereseauthorSep 02.2004 — I changed my body coding to:

#body {

width: 100%;

margin: 0 auto;

}


but nothing changed on screen, it is still all to the left.
Copy linkTweet thisAlerts:
@JonaSep 02.2004 — [font=trebuchet ms]That's because you're using absolute positioning. ? [/font]
Copy linkTweet thisAlerts:
@thereseauthorSep 02.2004 — 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>
Copy linkTweet thisAlerts:
@JonaSep 02.2004 — [font=trebuchet ms]You need to use floats and margins to position your DIV's. Read more about them at [url=http://www.w3.org/TR/CSS2/visuren.html#propdef-float]the W3C's CSS2 site[/url].[/font]
Copy linkTweet thisAlerts:
@thereseauthorSep 02.2004 — I don't understand what you said:

"You shouldn't insert CSS rules that are already defined"

What was already defined?
Copy linkTweet thisAlerts:
@thereseauthorSep 02.2004 — 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 (www.southgateschools.com) until I can read more. yes I know, you all will probably look at that and freak out about my table layout.

Thanks
Copy linkTweet thisAlerts:
@JonaSep 02.2004 — [font=trebuchet ms]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.[/font]
Copy linkTweet thisAlerts:
@thereseauthorSep 02.2004 — 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.
Copy linkTweet thisAlerts:
@JonaSep 02.2004 — [font=trebuchet ms]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."[/font]
×

Success!

Help @therese spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...