Form field alignment help

Discussion in 'CSS' started by wizzy, Mar 14, 2007.

0
  1. #1
    Hi

    Can someone please let me know how i can vertically align the form elements in the following page using CSS:

    Link: http://wizzy.justfree.com/loginpage2trial.htm

    The form elements in the page need to look like this:

    Link: http://wizzy.justfree.com/ideal_page.gif

    Any help will be appreciated.
     
    wizzy, Mar 14, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    My site is down at the moment, but see my form layout demo for a larger example.

    In the meantime, 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <title></title>
    <meta name="generator" content=
    "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
    <meta http-equiv="content-type" content=
    "text/html; charset=utf-8" />
    <meta name="editor" content="Emacs 21" />
    <meta name="author" content="Gary Turner" />
<style type="text/css">
  /*<![CDATA[*/
  html, body {
    margin: 0;
    padding: 0;
    }

  body {
    font: 100% verdana, helvetica, sans-serif;
    line-height: 1.25;
    color: black;
    background-color: white;
    }

  p {
    font-size: 1em;
    margin-bottom: 0 }
   
  p + p {
    margin-top: 0;
    text-indent: 1.4em;
    }   
   
  h1, h2, h3 {
    font-family: georgia, serif;
    }

form {
  width: 50%;
  margin: 1.25em auto 0;
  }

label {
  display: block;
  margin: 1.25em 0 0;
  }

label span {
  clear: left;
  float: left;
  text-align: right;
  width: 40%;
  }

#enter {
  clear: left;
  float: right;
  text-align: right;
  }

/*]]>*/
</style>

  </head>
  <body>
    <h1>
      Form layout demo
    </h1>
    <form>
      <fieldset>
        <p>
          Sign in to ABC Conglomerate
        </p>
        <label><span>COMPANY ID:</span> <input type="text" name=
          "signin" /></label> 
        <label><span>Password:</span> <input type=
          "password" name="passwd" /></label> 
        <input type="submit" value=
          "Sign In" id="enter" />
      </fieldset>
    </form>
  </body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 14, 2007 IP
  3. wizzy

    wizzy Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks! the code has really helped me solve the alignment problem , here is the link:

    http://wizzy.justfree.com/loginpage4.htm

    Now the problem is the page lookes alright on monitors set to a resolution of 1024x768, but not on monitors set to 800x600.So trying to solve that prob.
     
    wizzy, Mar 16, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Instead of 35% for the width, use 350px.

    cheers,

    gary
     
    kk5st, Mar 16, 2007 IP
  5. wizzy

    wizzy Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks again.Am still working on the page (have another assignment going), will surely post here once i put the page to rights.
     
    wizzy, Mar 20, 2007 IP