SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display in line?

    My input form (SACCC Form has the center section (Event Date/Time). I would like to put the Month, Day and Year inline instead of stacked as it is now.

    I tried various techniques, but nothing is doing what I want. I need to figure this out.

    Any suggestions would help.

    P.S. Not sure how to validate a PHP file so not sure how "clean" it is.

    F

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You don't really have enough room for that in the current layout.

    Still, the basic way to do it would be to remove this:

    Code:
    label {
      display: block;
    }

    and, assuming you want them all together in one lone row, also this:
    Code:
    fieldset li {
      padding-bottom: 0.5em;
      float: left;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried this but it did not work.

    I don't want all of the fieldsets to do this, just the middle one.

    F

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Put a special class on it then.

    Code:
    <fieldset class="middle">
    Code:
    .middle label {
      display: block;
    }

    and, assuming you want them all together in one lone row, also this:
    Code:
    fieldset.middle li {
      padding-bottom: 0.5em;
      float: left;
    }
    OK, there will be a better word than middle, but you get the idea.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    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)
    To align form controls and labels its best to use inline-block rather than floating as you can control each line more easily plus they vertically align correctly also.

    Here's a basic example.

    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">
    .formtest {
        width:350px;
        margin:auto;
    }
    .formtest label {
        display:inline-block;
        vertical-align:middle;
        width:90px;
        text-align:right;
        margin:10px 0;
    }
    .formtest input {
        width:200px;
        margin:10px 0;
        vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <form  class="formtest" id="form1" method="post" action="">
        <fieldset>
        <legend>Address Details</legend>
        <label for="firstname">First Name:</label>
        <input type="text" name="firstname" id="firstname" />
        <br />
        <label for="lastname">Last Name:</label>
        <input type="text" name="lastname" id="lastname" />
        <br />
        <label for="address1">Address 1:</label>
        <input type="text" name="address1" id="address1" />
        <br />
        <label for="address2">Address 2:</label>
        <input type="text" name="address2" id="address2" />
        <br />
        <label for="address3">Address  3:</label>
        <input type="text" name="address3" id="address3" />
        <br />
        <label for="address4">Address 4:</label>
        <input type="text" name="address4" id="address4" />
        <br />
        <label for="city">City:</label>
        <input type="text" name="City" id="city" />
        <br />
        <label for="state">State:</label>
        <input type="text" name="state" id="state" />
        <br />
        <label class="zip" for="zip">Zip:</label>
        <input type="text" name="zip" id="zip" />
        <br />
        <label for="tel">Telephone:</label>
        <input type="text" name="tel" id="tel" />
        <br />
        </fieldset>
    </form>
    </body>
    </html>


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
  •