SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
May 29, 2008, 02:33 #1
- 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
-
May 29, 2008, 04:16 #2
- 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
-
May 29, 2008, 04:26 #3
- 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
DM
-
May 29, 2008, 05:04 #4
- 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%}
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
-
May 29, 2008, 05:14 #5
- 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% setting?
Thanks for your input.
DM
-
May 29, 2008, 05:43 #6
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks