7 Replies - 1425 Views - Last Post: 05 October 2009 - 10:56 PM

#1 markhazlett9   User is offline

  • Coding is a lifestyle
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,666
  • Joined: 12-July 08

centering website not working

Posted 25 September 2009 - 03:56 PM

Hey all, I can't seem to get my website to center on the page. Here is what i have so far but it seems to cling to the left of the page and not display in the center...

HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	
	
		<title>Chris Lee Designs</title>
	</head>
	<body>
		<div id="container">
			<div id="middle"></div>
			<div id="header"></div>
			
		
		</div>
	</body>
</html>



CSS file

body
{
	text-align: center;
}

*
{
	margin: 0;
	padding: 0;
}

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

#header
{
	position: absolute;
	top:0px;
	left:0px;
	width: 900px;
	height:155px; 
	background-image: url(images/header.png);
	background-repeat: no-repeat;
}

#middle
{
	position: absolute;
	top:100px;
	left:0px;
	width: 900px;
	height: 600px;
	background-image: url(images/middle.png);
	background-repeat: no-repeat;
}



Si it because i'm using an absolute layout?

Cheers

This post has been edited by markhazlett9: 25 September 2009 - 04:01 PM


Is This A Good Question/Topic? 0
  • +

Replies To: centering website not working

#2 Christopher Elison   User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: centering website not working

Posted 25 September 2009 - 04:05 PM

Firstly, set your body a width (either percent or pixels), then set left and right margins as auto, like so:

body {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}



Et voila! Orrr... apply that to your #container, depending on how you want to do it really... you could resize the body and just let your container inherit the width instead of specifiying the widths of the #header and #middle.

This post has been edited by Christopher Elison: 25 September 2009 - 04:13 PM

Was This Post Helpful? 0
  • +
  • -

#3 markhazlett9   User is offline

  • Coding is a lifestyle
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,666
  • Joined: 12-July 08

Re: centering website not working

Posted 25 September 2009 - 04:10 PM

Thanks for the quick reply, that still however didn't work... here is my updated CSS file...
body
{
	margin-left: auto;
	margin-right: auto;
	width:960px;
}

*
{
	margin: 0;
	padding: 0;
}

#container
{
	width:900px;
	margin: 0 auto;
	text-align: left;
}

#header
{
	position: absolute;
	top:0px;
	left:0px;
	width: 900px;
	height:155px; 
	background-image: url(images/header.png);
	background-repeat: no-repeat;
}

#middle
{
	position: absolute;
	top:100px;
	left:0px;
	width: 900px;
	height: 600px;
	background-image: url(images/middle.png);
	background-repeat: no-repeat;
}

#footer
{
	position: absolute;
	top: 473px;
	left:0px;
	width:800px;
	height:300px;
	background-color: black;
}

#footerStyle
{
	position: absolute;
	top:0px;
	left:0px;
	width: 900px;
	height:300px;
	background-image: url(images/footerBand.png);
}


If you want you can see it in action here...
http://www.codepersp...hrisLeeDesigns/

Cheers
Was This Post Helpful? 0
  • +
  • -

#4 Christopher Elison   User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: centering website not working

Posted 25 September 2009 - 04:19 PM

I think if you get rid of the left:0px and top:0px for #header, #middle and #footer then it'll work.
Was This Post Helpful? 1
  • +
  • -

#5 markhazlett9   User is offline

  • Coding is a lifestyle
  • member icon

Reputation: 61
  • View blog
  • Posts: 1,666
  • Joined: 12-July 08

Re: centering website not working

Posted 25 September 2009 - 04:21 PM

View PostChristopher Elison, on 25 Sep, 2009 - 03:19 PM, said:

I think if you get rid of the left:0px and top:0px for #header, #middle and #footer then it'll work.



Right on that did in fact work! Thanks!

Cheers
Was This Post Helpful? 0
  • +
  • -

#6 Christopher Elison   User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: centering website not working

Posted 25 September 2009 - 04:28 PM

Just 2 small niggly things I thought I should let you know:

You're missing opening <html> tag and also, your body is set to 1100px and your container is set to 900, so it appears slightly left of center, if you want it to be perfectly centered, I recommend setting the body to 900px too, then I think it'll be ok :)

This post has been edited by Christopher Elison: 25 September 2009 - 04:30 PM

Was This Post Helpful? 0
  • +
  • -

#7 mrspuff   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 05-October 09

Re: centering website not working

Posted 05 October 2009 - 08:25 PM

hi
i am having problems centering my website despite using tons of example css codes on the net without any success. i am very new to css and xhtml etc.. so i maybe that's why it's not working. but can someone please look at my site www.gracefullearning.com/i.html or index.html and tell me what i am doing wrong.

first of all, i am not sure if my background should be including the double-sided vertical barlines or not???

thanks for any guidance.
grace [email protected]
Was This Post Helpful? 0
  • +
  • -

#8 capty99   User is offline

  • i am colt mccoy
  • member icon

Reputation: 100
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: centering website not working

Posted 05 October 2009 - 10:56 PM

a) post a new thread
B) post the code
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1