[SOLVED] center EVERYTHING

[legohead6]

well, i have my site and all the widths off stuff was defined in percent, so it wasnt an issue, but then i found out the percent doesnt work so well when you minimize, so i make it all with pixels and the dimensions 800 X 600, but then i have a 19" monitor and in full size everything is so far left it looks way off center, how would i go about making everything center, i have tried putting a div in at the very top and defineing that to be center( put a border around to to help troubleshoot) and all it showed was a thick like at the top of the page with thicker lines at each end... here is my css, html code from my header page(with some php that was in it), which is included in every other page of my site.

 

<style>
body {
padding:2px;
background: #32CD32;
scrollbar-arrow-color: #FFcc00;

scrollbar-base-color: #0080ff;

scrollbar-dark-shadow-color: #FFcc00;

scrollbar-track-color: #0080ff;

scrollbar-face-color: #00cc66;

scrollbar-shadow-color: #00cc66;

scrollbar-highlight-color: #FFcc00;

scrollbar-3d-light-color: #0080ff;

cursor-background: #FFFFCC;

}
#main {
width: 500px;
background: #0080ff;
border: 4px solid #32CD32;
}
#topbar {
position:absolute;
left: 150px;
width: 500px;
background: #0080ff;
padding: 10px;
z-index: 1;
}
#lftBar {
position:absolute;
width:100px;
top:210px;
left:2%;
padding:0px;
background: #0080FF;
color: #FFFFCC;
border:4px solid #32CD32;
}
#rgtBar {
position:absolute;
width: 100px;
top: 210px;
left: 700px;
width:inherit;
border:4px solid #32CD32;
}
#login{
Position: absolute;
width:100px;
top: 400px;
left:2%;
background: #0080FF;
color: #FFFFCC;
border:4px solid #32CD32;
}
#logo{
position: absolute;
top: 50px;
left: 2%;
width: 100px;
height: 80px;
background:#32CD32;
padding:4px;
padding-bottom: 0px;
}
#other{
position: absolute;
top: 50px;
left: 700px;
width: 100px;
height: 80px;
background:#32CD32;
padding:4px;
}
a{
color: #FFFFCC;
font-family: verdana;
font-size: 12px;
}
h3{
color: #FFFFCC;
font-size: 50pt;
text-align: center;
}
h1{
color: #FFFFCC;
text-align: center;
}
textarea{
background-color: #32CD32;
color: #FFFFCC;
border-color: #00FF00;
}
select{
background-color: #32CD32;
color: #FFcc00;
border-color: #0080ff;
}
input{
background-color: #32CD32;
color: #FFFFCC;
border-color: #00FF00;
}
hr{color: #32CD32;}
}
p{
color: #FFFFCC;
font-family: verdana;
font-size: 12px;
}
table{
background-color: #32CD32;
color: #FFFFCC;
}
a:visited {font-color: #FFFFCC;}
a:active {font-color: #FFFFCC;}
a:link {font-color: #FFFFCC;}
a:hover {font-color: #FFFFCC;}
#warn {
position:absolute;
width:10%;
top: 52%;
left: 2%;
background:#FF0000;
padding:1px;
border: dashed;
}
</style>
<?
if($l == "0"){
$link="http://www.zelocalz.com/images/flash/nnav.swf";
}else{
$link="http://www.zelocalz.com/images/flash/bnav.swf";
}
	if($l == 1){
$lin="<p align=center><form method=POST><font size=4>Signed In</font><br><br><a href=http://www.zelocalz.com/feedback.php?u=$user>$user($fd)</a><br><br> <input type=submit value=logout name=logout2></form>";
}else{


if(($_GET['ffp']) == 1){
$lin="<font size=3>Retrieve Password<br><form method=POST>
<br>UserName:<input type=text name=fuser size=13><br>
<input type=submit value=Submit name='forgotpp'><br>
</form><br><a href=index.php>Go Back</a></font>";

if(isset($_POST['forgotpp'])){

$userf=$_POST['fuser'];
$connect=mysql_connect ("localhost", "*********", "*********") or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db ("mattsweb_web"); 
$fp = "SELECT * FROM members WHERE username='$userf'";
$fpass = mysql_query($fp) or die ("Error in query: $query2. ".mysql_error());
while($fgp = mysql_fetch_row($fpass)){
$fps=$fgp[5];
$em=$fgp[3];
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: ZeLocalz <customersupport@zelocalz.com>' . "\r\n";
mail("$em", "Forgoten Password", "
Thankyou For using Zelocalz.com Here is Your Password From Your Password Request:<br> -----------------<br><br>Username: $userf<br> Password: $fps<br><br>
If you did Not ask for this please ignore as only the receptant of this email can see!

Sincerly,
The Customer Support Team,
Zelocalz", "$headers");


$lin="<font size=3>Your password has<br> been Emailed to you!<br><a href=index.php>Login!</a></font>";
}
}
}else{

$lin="<form method=POST>
<font size=2 color=red>$error</font><br>
<font size=2>UserName:<input type=text name=user size=12></font>
<font size=2>Password:<input type=password name=pass size=12></font>
<font size=2><input type=submit value='Sign In' name=sub> <a href=index.php?ffp=1&u=$foru>Forgot Pass</a></font>
</form>
<font size=3><a href=sign_up.php>Sign up for free!</a><br></font>";
}
}

$connect=mysql_connect ("localhost", "*********", "**********") or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db ("mattsweb_web"); 
$user=$_SESSION['user'];
$query1="SELECT * FROM Pmess WHERE tuser='$user'";
$result1 = mysql_query($query1) or die ("Error in query: $query1. ".mysql_error());
$pmes= mysql_num_rows($result1);
if($pmes > 0){
echo "<div id=warn>You Have <a href=http://www.zelocalz.com/profile/profileh.php?a=pmess>$pmes</a> New Pm's!</div>";
}
?>
<div id="logo">
<img border=0 src="../images/Logo.png" width=100% height=100%>
</div>
<script type="text/javascript" src="http://www.zelocalz.com/swfobject.js"></script>

<div id="lftBar">
  This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
   var so = new SWFObject("<? echo "$link" ?>", "mymovie", "100", "150", "7");
   so.write("lftBar");
</script>
<div id="login">
<?
echo "<p align=center>$lin</p>";
?>
</div>
</div>


<div id=right>

<div id="other">
<img border=0 src="../images/blank1.png" width=100% height=100%>
</div>
<div id=rgtbar>
<script type="text/javascript"><!--
google_ad_client = "pub-2239873906758408";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "32CD32";
google_color_bg = "0080FF";
google_color_link = "FFFFCC";
google_color_text = "000000";
google_color_url = "FFFFCC";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>


<div id=center>
<div align=center id="topbar">
<p><font size=8>Zelocalz</font></p>The Island Marketplace!
<div align=center id="banner"
</div>
<script type="text/javascript">
   var so = new SWFObject("http://www.zelocalz.com/images/flash/zelocalztag2.swf", "mymovie", "400", "50", "7");
   so.write("banner");
</script>
<div id="main">

[aebstract]

Without looking, I'm gonna say to add a div around everything you want centered, call it container and use this css..

 

html {
height: 100%;
}

body {
        text-align: center;
}

#container {
text-align: left;
margin-left: auto;
margin-right: auto;
}

[legohead6]

no, the div doesnt seem to want to wrap around everything.. its not on the pages itself so there has to be something stopping it in the header(included) or the footer which i doubt cuz its tiny...

[bwochinski]

If you have floated divs that's going to cause some issues with centering...

[kenrbnsn]

You have elements that are positioned "absolute". Those are going to go where you put them.  You have to figure out how to put the using relative positioning and floats.

 

Ken

[legohead6]

ya i think i got it now, thanks

[Daniel0]

* { margin: auto; text-align: center; }