Dave & Tom,
I still can't get it to work. It does everything the style sheet tells it to do, except centering. Below is what I have in my style sheet and my page. Maybe you can cut & paste to see if you can get it to work?
Style sheet (MyStyle.css):
body {
background-color: #000000;
color: #999999;
font: 1em/1em arial,verdana,sans-serif;
}
div#content {
width: 775px;
background-color:#535353;
margin-top: 30px;
margin-bottom: auto px;
margin-left: auto;
margin-right: auto;
border: thin solid #808080;
padding: 5px;
}
Web Page:
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 1/13/2008 9:14:10 PM -->
<head>
<title></title>
<link rel="stylesheet" href="MyStyle.css" type="text/css">
</head>
<body>
<div id="content">
Why is this content not centered?
</div>
</body>
</html>
Thanks for helping...
Mehmet Yuce
Registered User
6 posts
sstovert@satx.rr.com
Guest
5,410 posts
Put this as the first line of the html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
CoffeeCup... Yeah, they are the best!
Cliff Main
Registered User
2,138 posts
It's not your style sheet that is wrong. Sorry I did not jump in here with a solution sooner.
You gave us the code for your style sheet, and some content for the body and I overlooked the possibility of an incorrect doctype. If the doctype is wrong for the page or not specified, the centering will not work. On your page, make sure to use a doctype like this one:
<!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" xml:lang="en" lang="en">
That will allow your style sheet to center the content.
I see Tom is on to the same idea. This is the part that is important in the doctype for style sheets:
"http://www.w3.org/TR/html4/loose.dtd"
It has to have the http://www.w3.org address for the doctype that you are using. The web browser will not display certain options of style sheets without it.
You gave us the code for your style sheet, and some content for the body and I overlooked the possibility of an incorrect doctype. If the doctype is wrong for the page or not specified, the centering will not work. On your page, make sure to use a doctype like this one:
<!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" xml:lang="en" lang="en">
That will allow your style sheet to center the content.
I see Tom is on to the same idea. This is the part that is important in the doctype for style sheets:
"http://www.w3.org/TR/html4/loose.dtd"
It has to have the http://www.w3.org address for the doctype that you are using. The web browser will not display certain options of style sheets without it.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
www.mainsites.ca is my website, and yes, some of it is crappy.
David Sellers
Ambassador
426 posts
Ok, everyone else beat me to it but in addition to DOCTYPE you have an invalid px specification for margin-bottom.
Corrected Version
margin-bottom auto px;
Corrected Version
Let's not get all hurt.
Mehmet Yuce
Registered User
6 posts
Thanks guys, that did it.
Hank Davidson
Trial User
41 posts
Tom wrote:
This will center your container in all browsers. Another way to code it along with what Cliff posted.
#container {
width: 750px;
margin-left: auto;
margin-right: auto;
}
This will center your container in all browsers. Another way to code it along with what Cliff posted.
#container {
width: 750px;
margin-left: auto;
margin-right: auto;
}
What if you're using a background image larger than the container? Is there any way to "top center" the background position?
Cary
Ambassador
1,075 posts
You can apply the background image to the body.
sstovert@satx.rr.com
Guest
5,410 posts
Just put the image in its own centered div outside the container div and apply a z-index.
CoffeeCup... Yeah, they are the best!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
