SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    noob: How center a form in the center of the browser

    I need to put the form in the center position of the browser page. Even if the browser is resized. How do I do this:

    PHP Code:
    <form method="post" action="name.php"
    <
    input type="text" name="Name" />
    <
    input type="submit" value="submit" />
    </
    form

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Absolute center as in vertically and horizontally?
    There's an FAQ on that

    If it's just horizontally you can just give the form a width and margin: 0 auto;

  3. #3
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am following the same concept as above, but for a form. It doesn't work. I don't see the any form in the browser. Can someone help me please. I am a noob to css.


    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
        
        <
    link rel="stylesheet" href="mysite_name.css" type="text/css" />
    </
    head>
    <
    body>

    <
    div  class="namebody" >
    <
    div class="centre">
    <
    div id="nameform">
    <
    form method="post" action="/name.php"
    <
    input type="text" name="Name" />
    <
    input type="submit" value="submit" />
    </
    form>
    </
    div>
    </
    div>
    </
    div>
    </
    body
    Code:
    /* commented backslash hack for ie5mac \*/ 
    html, body{height:100%;} 
    /* end hack */
    .namebody {
    margin:0;
    padding:0;
    text-align:center;/* centre for ie5 and 5.5. */
    min-height:200px;/*for mozilla/opera */
    min-width:200px;/* """ */
    }
    div#nameform {
    position: absolute;
    left:0;
    top: 50%;
    margin-top: -100px; /* make this half your image/element height */
    }
    div.centre {
    height:100%;
    width:200px;
    margin-left:auto;/* centre for compliant browsers */
    margin-right:auto;/* centre for compliant browsers */
    position:relative;/* gain stacking context for absolutely placed element */
    }
    
    form {
    	padding: 10px;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    A form is like any other element in the respect that it can be styled the same as a div. It makes no difference whether its a form or not as you can style it and move it where you want.

    You need to know the actual height for this method.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    /* commented backslash hack for ie5mac \*/ 
    html, body{height:100&#37;;margin:0;padding:0} 
    /* end hack */
    body {
    text-align:center;/* centre for ie5 and 5.5. */
    min-height:200px;/*for mozilla/opera */
    min-width:200px;/* """ */
    }
    #nameform {
    position: absolute;
    left:0;
    width:100%;
    top: 50%;
    margin-top: -33px; /* make this half your image/element height */
    }
    .centre {
    height:100%;
    width:200px;
    margin-left:auto;/* centre for compliant browsers */
    margin-right:auto;/* centre for compliant browsers */
    background:red
    }
    
    form {
        padding: 10px;
    }
    </style>
    </head>
    <body>
    <form id="nameform" method="post" action="/name.php">
        <div class="centre">
            <input type="text" name="Name" />
            <input type="submit" value="submit" />
        </div>
    </form>
    </body>
    </html>

    If you have an unknown height then you can use a more complicated method like this:

    http://www.pmob.co.uk/pob/hoz-vert-center2.htm

  5. #5
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you so much.....enjoy the free internet beer

    John

  6. #6
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 and Firefox displaying it differently.

    Submit button in Firefox appears on to the right, but IE6 displays it on the left.
    I want the submit button to be on the right as in FireFox for IE6 also. Can someone explain to me what is going on?

    Here is my code:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Vertical centre an element of unknown height and width</title>
    <
    style type="text/css">
    /*
    Here I put Eric Meyer's Reset CSS
    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

    */
    html,body{height:100%}
    #wrapper{
        
    height:100%;
        
    width:100%;
        
    display:table;
        
    vertical-align:middle;
    }
    #outer{
        
    display:table-cell;
        
    vertical-align:middle;
    }
    #formwrap{
        
    position:relative;
        
    left:50%;
        
    float:left;
    }
    #form1{
        
        
    padding:20px 20px;
        
    position:relative;
        
    text-align:right;
        
    left:-50%;
    }
    p{margin:1em 0}


    label font-weightbold; }

    input.textinput.title   width300pxmargin:0.5em 0.5em 0.5em 0; }
    </
    style>
    <!--[if 
    gte IE 5]>
    <
    style type="text/css">
    #formwrap {top:50%}
    #form1{top:-50%;}
    </style>
    <![endif]-->

    </
    head>
    <
    body>
    <
    div id="wrapper">
        <
    div id="outer">
            <
    div id="formwrap">
                <
    form id="form1" method="post" action="">
                    <
    p>
                         <
    input type="text" class="text" name="Name" value="" />
                    </
    p>

                    <
    p>
                        <
    input type="submit" value="Submit" />
                    </
    p>
                </
    form>
            </
    div>
        </
    div>
    </
    div>
    </
    body>
    </
    html

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's a bug in IE.

    Add This (which was in my demo ):
    Code:
    input{position:relative;}

  8. #8
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you place the example into nested div, <div id="main">
    <div id="content">, then it doesn't work anymore:

    PHP Code:
    <div id="main"
    <
    div id="content"
    <
    div id="wrapper">
        <
    div id="outer">
            <
    div id="formwrap">
                <
    form id="form1" method="post" action="">
                    <
    p>
                        
                    <
    input type="text" class="text" id="dummy1" name="dummy1" value=""> </p>
                    
                    <
    p>
                        <
    input type="submit" class="submit" value="submit" />
                    </
    p>
                </
    form>
            </
    div>
        </
    div>
    </
    div>
    </
    div>
    </
    div
    Can you tell me why that be the case?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    then it doesn't work anymore:
    That's because you have killed the logic behind the 100&#37; height. You only have one shot at 100% height and it must be the first element on the page. If you add outer elements then the inner elements have nothing to base their height on because you cannot base a height on auto height elements. Read the faq on 100% height for a better explanation .

    Depending on what you are trying to do exactly it might be possible to give these outer elements a 100% height but that will assume that content will never be greater than 100%. It all depends on exactly what you are trying to achieve as at the moment you have asked for a form vertically and horizontally centred which is what you got


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
  •