Results 1 to 4 of 4

Thread: Can't Center a Form (PHP/HTML/CSS)

  1. #1
    vectro's Avatar
    vectro is offline I Like Stuff
    Join Date
    Dec 2008
    Location
    U.S.A.
    Posts
    633
    Thanks
    192
    Thanked 104 Times in 82 Posts

    Can't Center a Form (PHP/HTML/CSS)

    I can't seem to get the form on this site to center. I have tried wrapping it in <center> tags, using <div align="center">, <div style="text-align:center"> and <p style="text-align=center"> on the data inside of the <form> tags. It just won't center.

    I'm not a pro and didn't write this code. Any help is much appreciated.

    Here are the CSS pages in case they help at all:

    Code:
    body {
        background-image: url(images/top.jpg);
        background-repeat: no-repeat;
        background-color: #f8f8f8;
        text-align: center;
        font-family: "Trebuchet MS", Tahoma, Verdana;
        font-size: 12px;
        font-weight: normal;
        color: #6F6F6F;
        text-decoration: none;
        padding: 0px;
        margin: 0px;
    }
    
    br {
        clear: both;
    }
    label {
        float: left;
        width: 90px;
    }
    input, select {
        font-family: "Trebuchet MS", Tahoma, Verdana;
        font-size: 12px;
        font-weight: normal;
        color: #6F6F6F;
        background-color: #FFFFFF;
        border-top: 1px solid #D4D0C8;
        border-left: 1px solid #D4D0C8;
        border-right: 2px solid #A8A8A8;
        border-bottom: 2px solid #A8A8A8;    
        padding: 2px 3px 2px 3px;
        float: left;
    }
    .boton {
        font-family: "Trebuchet MS", Tahoma, Verdana;
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #A50706;
        border-top: 1px solid #D4D0C8;
        border-left: 1px solid #D4D0C8;
        border-right: 2px solid #A8A8A8;
        border-bottom: 2px solid #A8A8A8;
        text-decoration: none;
        padding-right: 10px;
        padding-left: 10px;
        cursor: pointer;
    }
    .copy {
        font-size: 12px;
        font-weight: normal;
        color: #6F6F6F;
        text-decoration: none;
        padding: 5px 16px 5px 16px;
        border-top: 1px solid #A8A8A8;
    }
    .adsense {
        background-color: #F2F2F2;
        border: 1px dashed #D4D0C8;
        font-size: 12px;
        text-decoration: none;
        margin: 0 auto 0 auto;
        text-align: left;
        padding: 5px;
        width: 468px;
    }
    .borde {
    background-image: url(images/mbg.jpg);
    background-repeat: repeat;
        width: 800px;
        border: 1px dashed #D4D0C8;
        font-size: 12px;
        text-decoration: none;
        margin: 16px auto 0 auto;
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 30px;
    }
    
    #main {
        width: 600px;
        height: 40px;
        position: absolute;
        top: 45%;
        left: 50%;
        margin-top: -200px;
        margin-left: -300px;
        text-align: center;
    }
    .link {
        color: #CC0000;
        text-decoration: none;
    }
    a.link:hover {
        color: #CC0000;
        text-decoration: none;
    }
    .subtit {
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        color: #CC0000;
    }
    Code:
    #lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }
    
    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }
    
    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
    
    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }
    
    #imageData{    padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
    #imageData #caption{ font-weight: bold;    }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
    #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}        
    
    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
    UPDATE: The problem was solved by adding this to the stylesheet:

    Code:
    form {
    width:450px;
    }
    Then, the form was wrapped in <center> tags.

    I still wonder if there is a less quick and dirty way to do this since the <center> tag isn't supposed to be used with PHP.
    Last edited by vectro; 2 February, 2010 at 01:06 AM. Reason: Added update

  2. #2
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    "margin:0 auto;" does the trick

    <center> and <div align="center"> are deprecated methods for centering content (or containers) the best valid way is CSS

    Parent tag should have the property "text-align:center;"
    and the container tag should have a specified width and an "auto" margin for sides

    Example:

    Code:
    /* body tag is the parent tag */
    
    body {
      text-align:center;
    }
    
    /* div #wrapper is inside body */
    
    #wrapper {
      width:960px;
      text-align:left;
      margin:20px auto;
    }
    hopefully this was helpful

  3. Thanked by:

    vectro (8 February, 2010)

  4. #3
    Mike-XS's Avatar
    Mike-XS is offline XeroAgent
    Join Date
    Sep 2009
    Location
    OZ
    Posts
    209
    Thanks
    30
    Thanked 109 Times in 71 Posts
    Yeah good stuff Aziz.

    You usually need to use both margin:0 auto [Firefox] and text-align:center [IE] for cross browser centering, and it helps to set a width.

  5. Thanked by:

    vectro (8 February, 2010)

  6. #4
    vectro's Avatar
    vectro is offline I Like Stuff
    Join Date
    Dec 2008
    Location
    U.S.A.
    Posts
    633
    Thanks
    192
    Thanked 104 Times in 82 Posts
    Quote Originally Posted by Aziz View Post
    <center> and <div align="center"> are deprecated methods for centering content (or containers)
    That was my concern.

    Quote Originally Posted by Mike-XS View Post
    You usually need to use both margin:0 auto [Firefox] and text-align:center [IE] for cross browser centering, and it helps to set a width.
    It centers well in Firefox with some code I got from somewhere else. It doesn't center well in IE. I'll have to take an extra look and try what you mentioned.

    UPDATE: I added margin:0 auto and text-align:center and it floated the entire form over to the right side of the page. Going back to the old code now:

    Code:
    form {
    position:relative;
    left:170;
    width:450;
    }

Similar Threads

  1. Entertainment Center
    By Fenrir in forum General Chat
    Replies: 0
    Last Post: 10 May, 2010, 18:48 PM
  2. How To Create An HTML Contact Us Form?
    By myjimmyjams in forum Web Design
    Replies: 10
    Last Post: 2 March, 2010, 09:47 AM
  3. Bing Webmaster Center !!
    By WebEvader in forum Search Engine News
    Replies: 6
    Last Post: 10 October, 2009, 00:02 AM
  4. Center a Video on Wordpress
    By Sami4u in forum Blogging
    Replies: 27
    Last Post: 30 September, 2009, 19:58 PM
  5. [WTS] Charm HTML PSD to HTML service
    By yangyang in forum Services
    Replies: 0
    Last Post: 10 December, 2008, 02:36 AM

Tags for this Thread

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
  •