Hey everyone, I'm a bit new still at html and css. I'm having a bit of a problem with the positioning of my main content. It won't be centered. I've used a background container to try to manage it and I can't, for the love of god, get it to the center of my screen. When I used <center> </center> it worked just fine but on m other computer the positioning was way off. I took that element out and now it's just stuck to the left still. I'm probably missing something wrong but if someone can look at it or tell me what I'm doing wrong, I'd appreciate it.
I'm using FireFox by the way and here's the code to my html and css files:
<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link href="tCss/main original.css" rel="stylesheet" type="text/css" />
<link href="tCss/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<div id="totalpos">
<!-- ////////////////////////////////////////////////// -->
<!-- Header -->
<div id="Headerpos">
<img src="images/weblogo.png">
</div>
<!-- End of Header -->
<!-- ////////////////////////////////////////////////// -->
<!-- Navigation Bar -->
<div id="Nav">
<div class="Home">
<a href="index.php">
<img src="images/Home2.png">
</a>
</div>
<div class="About">
<a href="#">
<img src="images/About.png"
onmouseover="this.src='images/About2.png'"
onmouseout="this.src='images/About.png'">
</a>
</div>
<div class="Projects">
<a href="#">
<img src="images/Projects.png"
onmouseover="this.src='images/Projects2.png'"
onmouseout="this.src='images/Projects.png'">
</a>
</div>
<div class="Apply">
<a href="#">
<img src="images/Apply.png"
onmouseover="this.src='images/Apply2.png'"
onmouseout="this.src='images/Apply.png'">
</a>
</div>
<div class="FAQ">
<a href="#">
<img src="images/FAQ.png"
onmouseover="this.src='images/FAQ2.png'"
onmouseout="this.src='images/FAQ.png'">
</a>
</div>
<div class="Contact">
<a href="#">
<img src="images/Contact.png"
onmouseover="this.src='images/Contact2.png'"
onmouseout="this.src='images/Contact.png'">
</a>
</div>
</div>
<!-- End of Navigation Bar -->
<!-- ////////////////////////////////////////////////// -->
<!-- Main Content -->
<div id="Mainpos">
<div id="LeftCT">
</div>
<div id="RightCT">
</div>
</div>
<!-- End of Main Content -->
<!-- ////////////////////////////////////////////////// -->
<!-- Footer -->
<div id="Footerpos">
<div class="tgiflogo">
<img src="images/footerlogo.png">
</div>
<div class="copy">
Copyright ©
</div>
</div>
<!-- End of Footer -->
</div>
</body>
</html>
and here's the css..
body
{
background: #000 url('../images/Mockup2.png') no-repeat center;
margin: 0 auto;
padding: 0;
width: 1900px;
height:1114px;
}
#wrapper
/*background: url('../images/BGs/total bg.png') no-repeat center;*/
width: 1000px;
height: 1114px;
left: 1px;
}
#Header
{
/*background: #fff url('../images/BGs/header bg.png') no-repeat center;*/
width: 1000px;
height: 140px;
top: 7px;
left: 1px;
float:left;
}
#Nav
{
/*background: #fff url('../images/BGs/nav bg.png') no-repeat center;*/
width: 1000px;
height: 40px;
top: 7px;
left: 1px;
float:left;
}
#Main
{
/*background:url('../images/BGs/main ct.png') no-repeat center;*/
width: 1000px;
height: 670px;
top: 7px;
left: 1px;
margin: 0 auto;
}
#Left
{
/*background:url('../images/BGs/left ct.png') no-repeat;*/
float: left;
width: 750px;
height: 670px;
}
#Right
{
/*background-image:url('../images/BGs/right ct.png');*/
background-repeat: no-repeat;
float: left;
position: relative;
width: 250px;
height: 670px;
}
#Footer
{
/*background:url('../images/BGs/footer bg.png') no-repeat center;*/
width: 1000px;
height: 250px;
top: 14px;
left: 1px;
clear:left;
}
.tgiflogo
{
position: relative;
float: left;
padding-top: 25px;
padding-left: 15px;
z-index:100;
}
.copy
{
position: relative;
float: left;
padding-top: 25px;
padding-left: 15px;
color: #ffffff;
font-size: 12px;
top: 10px;
}
