...

View Full Version : Problems Centering Document



newcssuser08
05-12-2008, 08:33 AM
Hi there,

I am new to CSS and I am having difficulties centering my document. It seems to be stuck towards the left side. I have tried changing the margins in the Div 'Docbounds' area, and within Page properties, but nothing seems to work. Can you help? Here is my top CSS coding segment of my site:

<!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">
<head>
<link rel="Shortcut Icon" href="favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Fav Icon Tutorial</title>
<style type="text/css">
<!--
#docbounds {
padding: 10px;
border: medium groove #DDDCDE;
margin: auto;
background-color: #7887A5;
clear: none;
float: none;
background-position: center;
width: 800px;
}
#masthead {
background-image: url(images/header.jpg);
margin: auto;
padding: 5px;
width: 790px;
height: 180px;
}
#content {
background-color: #DADADA;
color: #000000;
margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
}
body {
width: 1000px;
color: #666666;
background-color: #7887A5;
background-image: url(images/backdrop1.jpg);
background-repeat: repeat;
background-attachment: scroll;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
H1 {
color: #FFFFFF;
font-size: 50px;
font-style: normal;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: normal;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: 10px;
padding: 0px;
height: 170px;
}
h2 {
font-size: 24px;
color: #324F8A;
font-family: "Courier New", Courier, monospace;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
font-weight: 500;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
line-height: 17px;
text-align: left;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: 10px;
padding: 0px;
clear: none;
float: none;
height: auto;
width: auto;
}
.linkcode {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
color: #0000FF;
font-weight: 400;
}
img {
padding: 2px;
background-color: #DADADA;
margin: auto;
text-align: right;
}
#footer {
background-color: #A4ABB8;
}
.h2White {
font-family: "Courier New", Courier, monospace;
font-size: 24px;
color: #FFFFFF;
}
-->
</style>
</head>

abduraooft
05-12-2008, 08:45 AM
We need to see your html also, or a link would be more helpful.
BTW, please read http://www.codingforums.com/showthread.php?t=82672, regarding how to post code in this forum.

PS: If you are having problems with IE only, just add body{text-align:center} in your CSS

CaptainB
05-12-2008, 11:06 AM
If your whole site is contained within #docbounds , try following:


#docbounds {
padding: 10px;
border: medium groove #DDDCDE;
margin:0px auto;
background-color: #7887A5;
background-position: center;
width: 800px;
}

* { margin:0px;
padding:0px;
}

The second css rule resets the margin and padding for the whole document eliminating white spaces.

Candygirl
05-12-2008, 12:02 PM
body {
width: 1000px;
color: #666666;
background-color: #7887A5;
background-image: url(images/backdrop1.jpg);
background-repeat: repeat;
background-attachment: scroll;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

Hello,

You give a with:1000px to your body, your #docbounds will be center inside those 1000px not in the whole screen width... (I suppose #docbounds is body's child) You should remove this width:

body {
color: #666;
background: #7887A5 url(images/backdrop1.jpg);
margin:0;
}



PS: If you are having problems with IE only, just add body{text-align:center} in your CSS

This will help if IE is in Quirks mode. Here, there is a correct doctype specified so IE6 and 7 run in (almost) standards mode. This will help to center only in IE5.5 and under which do not have any standards mode.

effpeetee
05-12-2008, 01:06 PM
Candygirl,


your #docbounds will be center inside those 1000px

Probably better to use 'centered' here.

Frank

newcssuser08
05-19-2008, 09:37 AM
Thank you, everyone for your advice, I really appreciate it. I tried the suggestion from CandyGirl and it worked. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum