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 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How Do You Center A Form Vertically Inside A <Div>

    Code:
    #Header {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:800px;
    	height:100px;
    	border: 1px solid #39F;
    	text-align: center;
    }
    
    <div id="Header">
       <form method="get" action="http://www.google.com/search">
        <input type="text"   name="google" size="25" maxlength="255" value="" />
        <input type="submit" value="Google Search" />
      </form>
    </div>
    Thats what im working with

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh and is it possible to create a registration form inside a div and line it all up useing CSS or is tables the only way?

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by supergrame View Post
    Oh and is it possible to create a registration form inside a div and line it all up useing CSS or is tables the only way?
    Tables is the absolute wrong way!
    You can use pure CSS.

    If the height is going to be constant you can do this by setting the padding so it looks even.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much I was wondering about using tables because creating a div then a form then a table all in one spot looks messy. but every time i change the padding in my div it changes the width and height of the hole div container!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello supergrame,
    This works in all but IE6 -
    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 802px;
    	height: 400px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #header {
    	height: 100px;
    	line-height: 100px;
    	border: 1px solid #39F;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="header">
           <form method="get" action="http://www.google.com/search">
            <input type="text"   name="google" size="25" maxlength="255" value="" />
            <input type="submit" value="Google Search" />
          </form>
        <!--end header--></div>
    <!--end wrap--></div>
    </body>
    </html>
    Sorry, had to remove the ap.

    This seems to work in IE6 -
    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 802px;
    	height: 400px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #header {
    	height: 100px;
    	border: 1px solid #39F;
    	text-align: center;
    }
    #header form {
    	margin: 38px 0 0 0;
    }</style>
    </head>
    <body>
    <div id="wrap">
        <div id="header">
           <form method="get" action="http://www.google.com/search">
            <input type="text"   name="google" size="25" maxlength="255" value="" />
            <input type="submit" value="Google Search" />
          </form>
        <!--end header--></div>
    <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Padding does add to the width/height. Compensate by decreasing the height/width respectively.

    Also, this is how you code should be:
    Code:
    <div>
     <form>
      <fieldset>
         <input />
      </fieldset>
     </form>
    </div>
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thank you guys very much, great answers.

    since you are using div you have to creat a css id for every one to get them all in the positions you want. with that method i have ended up with alot of css rules (or maybe its called actions) allot of these
    Code:
    #layout #content # #picture {
                                                     align: center;
    }
    is that normal or am i missing something to lessen the css code?

    thanks again

  • #9
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found this in one of the forum posts. its how to create and place forms with no tables.

    http://www.cssdrive.com/index.php/ex...bleless_forms/

  • #10
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Arizona
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post

    use a class

    use a class inside of your div you really don't want to use absolute positioning

    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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <link href="3.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="Header"><div class="search">
       <form method="get" action="http://www.google.com/search">
        <input type="text"   name="google" size="25" maxlength="255" value="" />
        <input type="submit" value="Google Search" />
      </form>
      </div>
    </div>
    </body>
    
    </html>
    
    
    add this to your css
    .search{
    	width:400px;
    	margin:0 auto;
    	
    }


  •  

    Posting Permissions

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