SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Athens, Hellas
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering a page

    Hi all!

    please, have a look on my page. I want it to be centered horizontally and vertically.

    html
    HTML Code:
    <body>
    <div id="container">
    <div id="form">
    <form method="post" action="">
    <fieldset>
    <legend>
    Περιοχή μελών</legend>
    <label>
    Όνομα χρήστη<br />
    <input type="text" name="textfield" />
    </label>
    <br />
    <label>
    Κωδικός πρόσβασης<br />
    <input type="text" name="textfield" />
    </label>
    
    </fieldset>
    </form>
    
    </div>
    
    <p>&nbsp;</p>
    </div>
    </body>
    css
    HTML Code:
    body {
    margin: 0;
    padding:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #container {
    width: 850px;
    margin:auto;
    color:#000066;
    font-size:12px
    }
    Thank u in advance

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It IS centred (well horizontally anyway) - I copied it and made a test page, which worked.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Athens, Hellas
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I did not post a link of the page.
    It is not centered. Maybe it is messed up with something else in my css?

  4. #4
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in the body tag set the width to 800px or something like that and then in the BODY tag set margin-left: auto; margin-right:auto; I viewed in IE7 which did not center.
    Last edited by IJoeR; Apr 27, 2007 at 10:37. Reason: i just wanted to say more :)

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should enter it horizontally - maybe you are not seeing it centered due to the 850px width you set on the container.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
     body {
    margin: 0;
    padding:0;
    background-color:white;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    }
    #container {
    width: 600px; 
    text-align:left;
    color:#000066;
    font-size:12px;
    background-color:white;
    margin: 0 auto;
    }
    
    form {
    margin: 0;
    padding: 0;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <form id="form1" name="form1" method="post" action="list.php">
    <input type="hidden" name="PHPSESSID" value="9fc205c625c1cabc6e276204a1d1e3aa" />
    <p>Username
    <input type="text" name="txtkod" />
    </p>
    <p>Password
    <input type="text" name="textfield2" />
    </p>
    <p>
    <input type="submit" name="Submit" value="Submit" />
    </p>
    </form>
    </div>
    </body>
    </html>
    Nadia


Bookmarks

Posting Permissions

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