Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems Centering Document

    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    If your whole site is contained within #docbounds , try following:

    Code:
    #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.

  • #4
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by newcssuser08 View Post
    Code:
    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:
    Code:
    body {
    	color: #666;
    	background: #7887A5 url(images/backdrop1.jpg);
    	margin:0;
    }
    Quote Originally Posted by abduraooft View Post
    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.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Candygirl,

    your #docbounds will be center inside those 1000px
    Probably better to use 'centered' here.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank You!

    Thank you, everyone for your advice, I really appreciate it. I tried the suggestion from CandyGirl and it worked.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •