CSS Forum

**tehownererer** · 04-21-2009, 12:46 PM

So for a school project I am remaking a teachers website and he wanted a splash page, which is what i'm having problems with. I looked everywhere and have tried the margin-left: auto; margin-right: auto; width: 600px; and a bunch of other crazy stuff but none of it is working. I just want it all centered so whenever someone has a large resolution, the site is neatly centered and the rest of the space is black. Thanks for the help

Heres the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <!--Author:   Billy Haynes
              Date:     March 21, 2009
        -->
<title>
A.P. Us and World Geography Classes
</title>
<style type="text/css" rel="stylesheet">
.b {position: static; right: 20px; top: 20px; border:0px; position: absolute; top: 246px; left: 290px;}
.a {position: static; right: 20%; top: 20px;  border:0px; position: absolute; top: 250px; left: 510px;}
#container {
  width: 1000px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
body {
  margin-left: auto;
  margin-right: auto;
  background: black;
  margin: 0 0 0 0;
  text-align: center;
  background-image: url(back2.gif); background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div style="">
<a href="APUS.htm"><img src="hist.gif" alt="U.S. History A.P. Class" class="b" /></a>
<a href="geo.htm"><img src="geo.gif" alt="World Geography Class" class="a" /></a>
</div>
</div>
</body>
</html>

**LadynRed** · 04-21-2009, 02:35 PM

Suggest you read the stickies

http://www.webmaster-talk.com/css-fo...r-website.html

Get rid of the centering on the <body>, you don't need it. In that <body> block, you are first telling it to use margin: auto for left and right, then you tell it NO margins with the margin: 0 0 0 0; - so you are contradicting yourself. The centering should go on the container, not the body.

**tehownererer** · 04-22-2009, 01:15 AM

Alright yeah thanks a lot that was a silly mistake lol

I pretty much redid it all, even though it was my friends project haha i get carried away and had gotten really into it so he will be happy

There was a lot of things that had to be changed, the code was quite a mess ;p here it is and it works great.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /><!--Author:   Billy Haynes & a little help from Will Randolph :)
    Date:     March 21, 2009
        -->
<title>A.P. Us and World Geography Classes</title>

<style type="text/css">
/*<![CDATA[*/
.b {text-align:center;
    border: 0px; position: relative; top: 50%; left: -10%;}
.a {text-align:center;
    border: 0px; position: relative; top: 50%; left: 10%}
#container {
  width: 1000px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}
body {
  text-align: center;
  background: black url(http://www.chs.acs.ac/CHSsports/sports%20pics/dragon%20football.gif) no-repeat; background-position: center;
  height: 800px;}
</style>
</head>
<body>
<a href="APUS.htm"><img src="http://www.chs.acs.ac/library/Pics/1tailo~1mirror.gif" alt="U.S. History A.P. Class" class="b" /></a> <a href="geo.htm"><img src="http://www.chs.acs.ac/library/Pics/1tailo~1mirror.gif" alt="World Geography Class" class="a" /></a>
</body>
</html>

thats what it was supposed to look like the whole time haha. thanks for the help!