www.webdeveloper.com
Results 1 to 4 of 4

Thread: Novice: tableless design

  1. #1
    Join Date
    Oct 2005
    Posts
    22

    Novice: tableless design

    Hello...

    In this extremely simplified example:
    HTML Code:
    From: <input type="text" name="var1"><br />
    To: <input type="text" name="var2"><br />
    I'd like both text fields left-justified with each other, not shifted due to the difference in length of the words 'From' and 'To'.

    I'd like do this without using tables, but I'm probably missing something very basic.

    Any suggestions?

    Thx,
    O.

  2. #2
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    margin:0;
    padding:0;
    background-color:#fff;
    }
    ul {
    list-style:none;
    }
    li {
    position:relative;
    }
    input {
    position:absolute;
    left:4em;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><label>From: <input type="text" name="var1" /></label></li>
    <li><label>To: <input type="text" name="var2" /></label></li>
    </ul>
    </body>
    </html>

  3. #3
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,175
    Here's the way I usually do it:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang='en'>
    <head>
    <META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
    <title>Page title</title>
    <style type="text/css">
    <!--
    body {
      font: medium arial, helvetica, sans-serif;
      margin: 0;
      padding: 1em;
    }
    label {
      float: left;
      width: 3.5em;
    }
    form p {
      margin: 0.3em auto;
    }
    -->
    </style>
    </head>
    <body>
    <form action="#" method="post">
    <p><label for="var1">From:</label><input type="text" name="var1" id="var1"></p>
    <p><label for="var2">To:</label><input type="text" name="var2" id="var2"></p>
    </form>
    </body>
    </html>
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  4. #4
    Join Date
    Oct 2005
    Posts
    22
    Thanks, all. Looks like 'label' was what I was missing. Getting lots of mileage out of that already.

    Thanks again. Appreciate it,
    O.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles