SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What elements may appear in a Definition List (<dl>) ?

    Hey all,

    I'm trying to develop a definition list that appears across the page and am unable to see how to do this without wrapping the <dd> and <dt> elements to ensure that they appear in coupled pairs.

    Thus, I was wondering is it semantic to include some kind of wrapper within a definition list? Maybe a <div> ?

    Cheers,

    DM

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only elements that can be directly subordinate to a <dl> are <dt> and <dd>.

    If you find that you need some sort of wrapper around each item pair, what you've got is probably not a definition list, semantically.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, I'm actually dispalying a form.

    Whilst I realise that this is an area that has debate surrounding best practice, I've been led to believe that using form labels within a <dt> tag and inputs within <dd> validates as these tags are allowed to contain inline elements.

    Maybe my question is CSS orientated as much as markup; as you can probably tell I'm fairly new to all this. It seems like it should be fairly straight forward to display elements as follows, only I'm uncertain how to achieve it without some form of wrapper, any advice?

    Code:
    Element Label:    | Element Label:    | Element Label:
    Element           | Element           | Element
    Thanks again for the reply.

    DM

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's been a lot of discussion about the semantics of definition lists. I personally wouldn't consider your case to be a definition list, but I'm sure there are those who'll disagree.

    In theory, you could do it like this:
    Code HTML4Strict:
    <form action="...">
      <fieldset class="columnar">
        <legend>...</legend>
        <label for="e1">Element Label: <input id="e1"...></label>
        <label for="e2">Element Label: <input id="e2"...></label>
        <label for="e3">Element Label: <input id="e3"...></label>
      </fieldset>
    </form>
    Code CSS:
    .columnar label {float:left}
    .columnar label input {display:block; width:99&#37;}

    In practice, this may cause some problems. IIRC, the screen reader Window-Eyes won't work properly if you nest the inputs within the labels. Therefore, you may have to wrap each label/input pair in a DIV:
    Code HTML4Strict:
    <form action="...">
      <fieldset class="columnar">
        <legend>...</legend>
        <div>
          <label for="e1">Element Label:</label>
          <input id="e1"...>
        </div>
        <div>
          <label for="e2">Element Label:</label>
          <input id="e2"...>
        </div>
        <div>
          <label for="e3">Element Label:</label>
          <input id="e3"...>
        </div>
      </fieldset>
    </form>
    Code CSS:
    .columnar div {float:left}
    .columnar div label {display:block}
    .columnar div input {width:99%}
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tommy, I'll give this suggestion a go.

    I don't disagree with you on definition lists, I have no real opinion, I just would prefer my HTML to be as accessible as possible. I'm currently using a programatic form implementation (Zend_Form) and it uses a definition list wrapper as a default decorator. I was hoping to avoid changing it, but it seems thats not possible.

    Out of curiousity, why the width 99&#37; setting?

    Thanks for your input.

    DM

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DangerMouse1981 View Post
    Out of curiousity, why the width 99% setting?
    To make the input field as wide as the label (or the enclosing DIV, if you set a width for that).

    You can't use 100%, because input fields usually have borders and you end up with 100%+2px which causes overflow.
    Birnam wood is come to Dunsinane


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
  •