HTML/CSS - Help needed

L

Loading

Addicted
Joined
Aug 30, 2009
Messages
880
Reaction score
0
FP$
692
So, I made a website but now I need to align the whole website to the center of the browser screen. I can't find a way to do it.

My current codes:

HTML:
Code: 
	<html>
	  <head>
		<title>Site - Index</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	  </head>
	  <body>
	<div id="wrapper">
	  	</body>
	  <div id="content">
	  <h1><img src= "images/header2.png"></img></h1>
			<h6 />
			<h2><FONT COLOR="#000000">Affiliates</FONT><br />Example</h2>
<h3><a href="">Example</a> • <a href="">Example</a> • <a href="">Example</a> • <a href="">Example</a></h3>
 <h4></h4>
 
 <h7><FONT COLOR="#000000">Useful Links</font><br />
 <a href="http://twitter.com/"><img src= "images/twitter.png"></img></a> <a href="http://facebook.com/"><img src= "images/facebook.png"></img></a> <a href="http://youtube.com/"><img src= "images/youtube.png"></img></a></h7>
  <h8><FONT COLOR="#000000">Poll</color> <br /><form method=post action=http://poll.pollhost.com/vote.cgi><table border=0 width=150 bgcolor=#1589ff cellspacing=0 cellpadding=2><tr><td colspan=2><font face="Arial" size=-1 color="#CCCCCC"><b>Rate this template</b></font></td></tr><tr><td width=5><input type=radio name=answer value=1></td><td><font face="Arial" size=-1 color="#CCCCCC">5</font></td></tr><tr><td width=5><input type=radio name=answer value=2></td><td><font face="Arial" size=-1 color="#CCCCCC">4</font></td></tr><tr><td width=5><input type=radio name=answer value=3></td><td><font face="Arial" size=-1 color="#CCCCCC">3</font></td></tr><tr><td width=5><input type=radio name=answer value=4></td><td><font face="Arial" size=-1 color="#CCCCCC">2</font></td></tr><tr><td width=5><input type=radio name=answer value=5></td><td><font face="Arial" size=-1 color="#CCCCCC">1</font></td></tr><tr><td width=5><input type=radio name=answer value=6></td><td><font face="Arial" size=-1 color="#CCCCCC">0</font></td></tr><tr><td colspan=2><input type=hidden name=config value="VGhpYWdvc2wJMTI4ODA1MDIwNQkwMDAwRkYJQ0NDQ0NDCUFyaWFsCUJsdWU"><center><input type=submit value=Vote>&nbsp;&nbsp;<input type=submit name=view value=View></center></td></tr><tr></tr></table></form></h8>
  <h9><FONT COLOR="#000000">Site Team</color><br /><img src="images/siteteam.png"></img><br><SPAN CLASS="TeamTitle">Thiago</SPAN><SPAN CLASS="TeamText"><br>Site owner and lead designer of Alfa Design.</span></h9>
  <h10><FONT COLOR="#000000">Welcome to Alfa Design!</color><SPAN CLASS="TeamText"><br><br>Alfa Design is a new site where you can find free and premium HTML/CSS templates. Check our prices <a href="">here</a>!</class></h10>
  <h11><FONT COLOR="#000000">Grand Opening!</color><SPAN CLASS="TeamText"><br><br>text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text.</span></h11>
  <h5>YourSiteName © 2010<br />
 This website was designed by Thiago S. Lunkes - Alfa Design © 2010</h5>
 </div>
 </div>
 </center>

	</html>
CSS:
Code: 
	body {
	  background-image: url("images/back.png");
	  background-position: center center;
	  background-color: #544E4F;
	  margin-top: 10px;
	  margin-right: 250px;
	  margin-bottom: 250px;
	  margin-left: 250px;
	  text-align:center;
			}
	
	/*Texts*/	
	h1 { /*Header text*/ 
	font-family: Trebuchet MS;
	font-size: 60px;
	text-align: center;
	color: #544E4F;
	
	}		
	h2 { /*Affiliates*/
	line-height: 55px;
	font-family: Trebuchet MS;
	font-size: 40px;
	color: #544E4F;
	text-align: center;
	background-image: url("images/affiliates.png");
		/*width: 193;
		height: 337;*/
		width: 193;
		height: 700;
		float: right;
		margin-right: -16px;
		margin-top: -800px;
		border-width: 3px;
		border-style: solid;
		border-color: #000000;	
	}
		h3 { /*Navbar*/
	vertical-align: middle;
	line-height: 40px;
	font-family: Trebuchet MS;
	font-size: 30px;
	color: #000000;
	text-align: center;
	background-image: url("images/navbar.png");
		width: 1093;
		height: 48;
		float: center;
		margin-top: -865px;
		border-width: 3px;
		border-style: solid;
		border-color: #000000;	
	}
	h4 { /*Image Left*/
	
	}
		h5 { /*Footer + copyright*/
	line-height: 25px;
	font-family: Trebuchet MS;
	font-size: 15px;
	color: #000000;
	text-align: center;
	background-image: url("images/navbar.png");
		width: 1093;
		height: 48;
		float: center;
		margin-top: 728px;
		border-width: 3px;
		border-style: solid;
		border-color: #000000;
	}
			h6 { /*light background*/
	line-height: 40px;
	font-family: Trebuchet MS;
	font-size: 15px;
	color: #000000;
	text-align: center;
	background-image: url("images/light.png");
	width: 1099;
	height: 825;
	float: center;
	margin-top: -25px;
	}
	
	h7 { /*Useful Links*/
	line-height: 65px;
	font-family: Trebuchet MS;
	font-size: 40px;
	color: #544E4F;
	text-align: center;
	background-image: url("images/affiliates.png");
	width: 220;
	height: 135;
	float: left;
	margin-right: -17px;
	margin-top: -548px;
	border-width: 3px;
	border-style: solid;
	border-color: #000000;	
	}
		h8 { /*Poll*/
	line-height: 65px;
	font-family: Trebuchet MS;
	font-size: 40px;
	color: #544E4F;
	text-align: center;
	background-image: url("images/affiliates.png");
	width: 220;
	height: 240;
	float: left;
	margin-left: 20px;
	margin-left: -1px;
	margin-top: -800px;
	border-width: 3px;
	border-style: solid;
	border-color: #000000;	
	}
			h9 { /*Site Team*/
	line-height: 65px;
	font-family: Trebuchet MS;
	font-size: 40px;
	color: #544E4F;
	text-align: center;
	background-image: url("images/affiliates.png");
	width: 220;
	height: 300;
	float: left;
	margin-left: 20px;
	margin-left: -1px;
	margin-top: -400px;
	border-width: 3px;
	border-style: solid;
	border-color: #000000;	
	}
	
				h10 { /*News*/
	line-height: 65px;
	font-family: Trebuchet MS;
	font-size: 50px;
	color: #544E4F;
	text-align: center;
	background-image: url("images/news.png");
	width: 600;
	height: 150;
	float: left;
	margin-left: 260px;
	margin-top: -800px;
	border-width: 3px;
	border-style: solid;
	border-color: #000000;	
	}
					h11 { /*Center News*/
	line-height: 65px;
	font-family: Trebuchet MS;
	font-size: 50px;
	color: #544E4F;
	text-align: center;
	background-image: url("images/center.png");
	width: 600;
	height: 530;
	float: left;
	margin-left: 260px;
	margin-top: -630px;
	border-width: 3px;
	border-style: solid;
	border-color: #000000;	
	}
	/*Site Team Text*/
    /*Staff name*/
	.TeamTitle {
	font-family: Trebuchet MS;
	font-size: 30px;
	text-align: center;
	}
	/*Staff description*/
		.TeamText {
	line-height: 20px;
	font-family: Trebuchet MS;
	font-size: 20px;
	text-align: center;
	}
	p { /*Intro text*/
	font-family: Trebuchet MS;
	font-size: 20px;
	color: #FDEEF4;
	}
	/*Links*/
	a:link {
		color: #000000
		text-decoration: none;
	}
	a:visited {
		color: #000000;
		text-decoration: none;
	}
	a:active {
		color: #000000;
		text-decoration: none;
	}
	a:hover {
	    color: #544E4F
		text-decoration: none;
	}
.wrapper {
text-align: center;
width: auto;
margin:0 auto;
}
.content {
	width: 100%;
}
http://thiago.justfreehosting.net
The text seems to be aligned, I just need to align the website now.
 
I would say the <div id="wrapper"> should be before all your coding in the <body> tags.

Also my wrap tag is this:
.wrap {
width: auto;
margin:0 auto;

Try that.
 
I got it centered for me using following code:

Code: 
 body {
     background-image: url("images/back.png");
     background-position: center center;
     background-color: #544E4F;
     margin-top: 10px;
     margin-right: 175px;
     margin-bottom: 200px;
     margin-left: 165px;
     text-align:center;
 }
   
   /*Texts*/   
   h1 { /*Header text*/ 
   font-family: Trebuchet MS;
   font-size: 60px;
   text-align: center;
   color: #544E4F;
   
   }      
   h2 { /*Affiliates*/
   line-height: 55px;
   font-family: Trebuchet MS;
   font-size: 40px;
   color: #544E4F;
   text-align: center;
   background-image: url("images/affiliates.png");
      /*width: 193;
      height: 337;*/
      width: 193;
      height: 700;
      float: right;
      margin-right: -16px;
      margin-top: -800px;
      border-width: 3px;
      border-style: solid;
      border-color: #000000;   
   }
      h3 { /*Navbar*/
   vertical-align: middle;
   line-height: 40px;
   font-family: Trebuchet MS;
   font-size: 30px;
   color: #000000;
   text-align: center;
   background-image: url("images/navbar.png");
      width: 1093;
      height: 48;
      float: center;
      margin-top: -865px;
      border-width: 3px;
      border-style: solid;
      border-color: #000000;   
   }
   h4 { /*Image Left*/
   
   }
      h5 { /*Footer + copyright*/
   line-height: 25px;
   font-family: Trebuchet MS;
   font-size: 15px;
   color: #000000;
   text-align: center;
   background-image: url("images/navbar.png");
      width: 1093;
      height: 48;
      float: center;
      margin-top: 728px;
      border-width: 3px;
      border-style: solid;
      border-color: #000000;
   }
         h6 { /*light background*/
   line-height: 40px;
   font-family: Trebuchet MS;
   font-size: 15px;
   color: #000000;
   text-align: center;
   background-image: url("images/light.png");
   width: 1099;
   height: 825;
   float: center;
   margin-top: -25px;
   }
   
   h7 { /*Useful Links*/
   line-height: 65px;
   font-family: Trebuchet MS;
   font-size: 40px;
   color: #544E4F;
   text-align: center;
   background-image: url("images/affiliates.png");
   width: 220;
   height: 135;
   float: left;
   margin-right: -17px;
   margin-top: -548px;
   border-width: 3px;
   border-style: solid;
   border-color: #000000;   
   }
      h8 { /*Poll*/
   line-height: 65px;
   font-family: Trebuchet MS;
   font-size: 40px;
   color: #544E4F;
   text-align: center;
   background-image: url("images/affiliates.png");
   width: 220;
   height: 240;
   float: left;
   margin-left: 20px;
   margin-left: -1px;
   margin-top: -800px;
   border-width: 3px;
   border-style: solid;
   border-color: #000000;   
   }
         h9 { /*Site Team*/
   line-height: 65px;
   font-family: Trebuchet MS;
   font-size: 40px;
   color: #544E4F;
   text-align: center;
   background-image: url("images/affiliates.png");
   width: 220;
   height: 300;
   float: left;
   margin-left: 20px;
   margin-left: -1px;
   margin-top: -400px;
   border-width: 3px;
   border-style: solid;
   border-color: #000000;   
   }
   
            h10 { /*News*/
   line-height: 65px;
   font-family: Trebuchet MS;
   font-size: 50px;
   color: #544E4F;
   text-align: center;
   background-image: url("images/news.png");
   width: 600;
   height: 150;
   float: left;
   margin-left: 260px;
   margin-top: -800px;
   border-width: 3px;
   border-style: solid;
   border-color: #000000;   
   }
               h11 { /*Center News*/
   line-height: 65px;
   font-family: Trebuchet MS;
   font-size: 50px;
   color: #544E4F;
   text-align: center;
   background-image: url("images/center.png");
   width: 600;
   height: 530;
   float: left;
   margin-left: 260px;
   margin-top: -630px;
   border-width: 3px;
   border-style: solid;
   border-color: #000000;   
   }
   /*Site Team Text*/
    /*Staff name*/
   .TeamTitle {
   font-family: Trebuchet MS;
   font-size: 30px;
   text-align: center;
   }
   /*Staff description*/
      .TeamText {
   line-height: 20px;
   font-family: Trebuchet MS;
   font-size: 20px;
   text-align: center;
   }
   p { /*Intro text*/
   font-family: Trebuchet MS;
   font-size: 20px;
   color: #FDEEF4;
   }
   /*Links*/
   a:link {
      color: #000000
      text-decoration: none;
   }
   a:visited {
      color: #000000;
      text-decoration: none;
   }
   a:active {
      color: #000000;
      text-decoration: none;
   }
   a:hover {
       color: #544E4F
      text-decoration: none;
   }
.wrapper {
text-align: center;
width: auto;
margin:0 auto;
}
.content {
   width: 100%;
}

I just changed the numbers in the body { tag:
Code: 
margin-right: 175px;
margin-left: 165px;

Oh edit:

I also put the </body> tag in the right place:
Code: 
   <html>
     <head>
      <title>Site - Index</title>
      <link rel="stylesheet" type="text/css" href="style.css" />

     </head>
     <body>
   <div id="wrapper">
     <div id="content">
     <h1><img src= "images/header2.png"></img></h1>
         <h6 />
         <h2><FONT COLOR="#000000">Affiliates</FONT><br />Example</h2>
<h3><a href="">Example</a> • <a href="">Example</a> • <a href="">Example</a> • <a href="">Example</a></h3>
<h4></h4>

<h7><FONT COLOR="#000000">Useful Links</font><br />
<a href="http://twitter.com/"><img src= "images/twitter.png"></img></a> <a href="http://facebook.com/"><img src= "images/facebook.png"></img></a> <a href="http://youtube.com/"><img src= "images/youtube.png"></img></a></h7>
  <h8><FONT COLOR="#000000">Poll</color> <br /><form method=post action=http://poll.pollhost.com/vote.cgi><table border=0 width=150 bgcolor=#1589ff cellspacing=0 cellpadding=2><tr><td colspan=2><font face="Arial" size=-1 color="#CCCCCC"><b>Rate this template</b></font></td></tr><tr><td width=5><input type=radio name=answer value=1></td><td><font face="Arial" size=-1 color="#CCCCCC">5</font></td></tr><tr><td width=5><input type=radio name=answer value=2></td><td><font face="Arial" size=-1 color="#CCCCCC">4</font></td></tr><tr><td width=5><input type=radio name=answer value=3></td><td><font face="Arial" size=-1 color="#CCCCCC">3</font></td></tr><tr><td width=5><input type=radio name=answer value=4></td><td><font face="Arial" size=-1 color="#CCCCCC">2</font></td></tr><tr><td width=5><input type=radio name=answer value=5></td><td><font face="Arial" size=-1 color="#CCCCCC">1</font></td></tr><tr><td width=5><input type=radio name=answer value=6></td><td><font face="Arial" size=-1 color="#CCCCCC">0</font></td></tr><tr><td colspan=2><input type=hidden name=config value="VGhpYWdvc2wJMTI4ODA1MDIwNQkwMDAwRkYJQ0NDQ0NDCUFyaWFsCUJsdWU"><center><input type=submit value=Vote>&nbsp;&nbsp;<input type=submit name=view value=View></center></td></tr><tr></tr></table></form></h8>
  <h9><FONT COLOR="#000000">Site Team</color><br /><img src="images/siteteam.png"></img><br><SPAN CLASS="TeamTitle">Thiago</SPAN><SPAN CLASS="TeamText"><br>Site owner and lead designer of Alfa Design.</span></h9>
  <h10><FONT COLOR="#000000">Welcome to Alfa Design!</color><SPAN CLASS="TeamText"><br><br>Alfa Design is a new site where you can find free and premium HTML/CSS templates. Check our prices <a href="">here</a>!</class></h10>
  <h11><FONT COLOR="#000000">Grand Opening!</color><SPAN CLASS="TeamText"><br><br>text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text.</span></h11>
  <h5>YourSiteName © 2010<br />
This website was designed by Thiago S. Lunkes - Alfa Design © 2010</h5>
</div>
</div>
</center>
</body
   </html>
 
change <div id="wrapper"> to <div id="wrapper" align="center">

and that should do it. Assuming that is what you are centering.
 
I'm using google chrome, I'll make two versions of the website: one for chrome and another for firefox.
 
Did it not work?

Edit: Just looked at firefox and have no idea why it aint working.

Im out of ideas.
 
about lee said:
Did it not work?

Edit: Just looked at firefox and have no idea why it aint working.

Im out of ideas.
Click to expand...

Same, I'm pretty much giving up. I've been trying to align this site for a day.
 
about lee said:
I would say the <div id="wrapper"> should be before all your coding in the <body> tags.

Also my wrap tag is this:
.wrap {
width: auto;
margin:0 auto;

Try that.
Click to expand...

This will work but you need to assign a width.

Code: 
#wrapper {
	width: 700px;
	margin: auto;
}
 
JohnC said:
about lee said:
I would say the <div id="wrapper"> should be before all your coding in the <body> tags.

Also my wrap tag is this:
.wrap {
width: auto;
margin:0 auto;

Try that.
Click to expand...

This will work but you need to assign a width.

Code: 
#wrapper {
	width: 700px;
	margin: auto;
}
Click to expand...


Didn't work on Firefox ;/
 
Try adding a general reset. Something like this at the top of your css file.

Code: 
* {
   margin: 0;
}

Might not work, I'm quite tired at the moment.
 
You must log in or register to reply here.

About Us

Since 2007, Forum Promotion has specialized in providing advertising solutions to webmasters looking to promote their communities. We pride ourselves in being the bridge that connects forum administrators, bloggers, and more.

Sponsors

Affiliates

    Universal Gaming The Coffee House

Stay Connected

Back
Top Bottom