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 2 of 2
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question <dl><dt> not inline?!

    Hi,

    I was just wondering how I could style my <DT><DD> on my site so that the title and the form field were inline?!:

    Code:
    <dl>
                                                <dt><label for="Title">* Title:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Title" name="!Title"></dd>
    
                                                <dt><label for="First_Name">* First Name:</label></dt>
                                                <dd><input type="text" size="30" value="" id="First_Name" name="!First_Name"></dd>
    
                                                <dt><label for="Surname">* Surname:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Surname" name="!Surname"></dd>
    
                                                <dt><label for="Address_Line_1">* Address Line 1:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Address_Line_1" name="!Address_Line_1"></dd>
    
                                                <dt><label for="Address_Line_2">Address Line 2:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Address_Line_2" name="Address_Line_2"></dd>
    
                                                <dt><label for="Address_Line_3">Address Line 3:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Address_Line_3" name="Address_Line_3"></dd>
    
                                                <dt><label for="Town">* Town:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Town" name="!Town"></dd>
    
                                                <dt><label for="Post_Code">* Post Code:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Post_Code" name="!Post_Code"></dd>
    
                                                <dt><label for="Email">* Email:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Email" name="!Email"></dd>
    
                                                <dt><label for="Telephone">* Telephone:</label></dt>
                                                <dd><input type="text" size="30" value="" id="Telephone" name="!Telephone"></dd>
                                            </dl>
    CSS:

    Code:
    dl {
        overflow: hidden;
        margin: 2em 0;
        width: 38.5em;
    }
    dt {
        float: left;
        width: 13em;
        margin: 0 1em 0 0;
        font-size: 1.2em;
        line-height: 1.6em;
    }
    dt label {
        display: block;
        text-align: right;
        line-height: 2em;
    }
    dd {
        float: left;
        width: 17.5em;
        font-size: 1.2em;
        line-height: 1.6em;
    }
    dd span {
        line-height: 2.1em;
    }
    dd input {
        line-height: 1.6em;
        border: 0.1em solid #006140;
        margin: 0 0 0.5em 0;
        width: 15em;
    }
    dd input.checkbox, dd input.radio {
        margin: 0.5em 0 1em 0;
        border: 0;
        width: auto;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    First of all, that’s not the appropriate mark-up for a form. “dl” means “definition list” where “dt” is the “definition term” and “dd” the “definition description”. A definition list is more suited for dictionary kind of things.

    A good way to mark up a form is like this:
    Code:
    <form>
      <div>
        <label></label>
        <input>
      </div>
      <div>
        <label></label>
        <input>
      </div>
      <div>
        <label></label>
        <input>
      </div>
      …
    <form>
    Optionally, you can wrap fieldsets (<fieldset>) around certain parts to group fields.

    Now, the above code will show labels and associated inputs on one line by default with the divs starting new lines each. If you decide to change it so that the label text should show up above the inputs then you can change the inputs to display: block;. That’s the most flexible and semantically useful way to mark up a form.


  •  

    Posting Permissions

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