1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Form field alignment help

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

  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