Defintion list with multiple terms

HTML & CSS
1

One of the great things about definition lists is that a DD can apply to many DTs or a singe DD can have several DTs. his however can make coding columns (displaying the DTs on one side the corresponding DLs on another) a bit difficult.

I got close with the following code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
	p, dt, dd {margin:0; padding:0;}
	dt {float:left; width:12.5em; font-weight:bold; background:orange; margin-left:-14.5em; text-align:right; clear:left; margin-bottom:1em; padding:.5em}
	dl { background:#ccc; overflow:hidden; padding-left:14.5em; padding-right:1em }
	dd{padding-bottom:1em; }
	dd+dd {padding-top:1em; border-top:1px dotted #000; margin-top:-1px;}
	.cat {margin-top:2em}
	dt+dd{overflow:hidden;}
</style>

</head>

<body>
     <dl>
          <dt>hey</dt>
          <dd>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
               egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
          <dt class="cat">hey you!!</dt>
          <dt>hey</dt>
          <dt>a longer definition term; terms could have that wrap.</dt>
          <dd class="cat">Lorem ipsum... ellentesque habitant morbi tristique senectus et netus et malesuada fames
               ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
               Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
               leo.aterials</dd>
          <dd >ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
               egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
          <dt class="cat" >hey</dt>
          <dd class="cat">XXellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
               egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
               libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
     </dl>
</body>
</html>

it looks fine, at first, but when you extend your viewport so that the content on the DD becomes shorter than the accompanying DDs they all get out of sync. in this example, if you have a really wide screen and stretch your browser window you will see that the content of the last DD begins to look as if it goes with the second group of DTs.

This is, of course, because all of the DTs are floated left, cleared left. But floating both will not produce a column effect… :confused:

so I am curious if my only option is to use multiple DLs, which would fix the problem visually, but I feel seriously compromise the gracefulness of the code…

As always, you w insights area greatly appreciated

2

I feel like you’re not taking the correct approach on this.

It seems to me that it’s about clearing floats, that will make the top of the first dt align with the top of the first dd in a sequence.

Try this:


.cat {
    clear: right;
    margin-top: 2em;
}

As an alternative approach, at a first glance, you could make dt display block, dd float left/right, and the first dt in a sequence be clearing left/right…

3

noonenope,

I did have aq sense that this might have to do with clearing floats.
the .cat{clear:right;} was my first try… the only caveat to that is that adding clear-right.
clear right has no effect on non floated items, of course. So it’s actual effect is to remove clear:left from the DT.cat ( when it replaces it with clear:right) and this means that it now runs up into the previous DT.

switching my floats (from the DTs to the DL) had the same problems, plus the added problem that the DTs come first in the source order. which means that the DDs always dropped below the DTs rather than lining up…

floating doth the DDs and DTs had no better an effect whenever I had more than one DD or one DT…

4

OK, I am thinkinging I am going to file this one under “cant be done with pure css”

I kept going in circles with this hrs. here are my conclusions:

  1. to make the column the DT MUST be floated (I even tried some convoluted right float & negative margin stuff) because it MUST come first in the source code

  2. floating the DD left or right( with a width of 100%) will solve the issue of the right side sucking itself out of place when the screen is wide, but it will cause the more obvious issue that a float cant be above another. simply put, if you float the DD, the first DD will display equal or bellow the LAST DT in a group.

  3. DESPERATION TRY #1 : add clear:left to first DD… ( causes all DDs to drop bellow their corresponding DTs… as described above)

  4. DESPERATION TRY #2 : add clear:left to last DD… ( causes gap to form between last DD and other DD, but doesn’t solve the problem)

this is my latest version


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
	p, dt, dd {margin:0; padding:0;}
	dd.top{margin-top:0;}
	dl { background:#ccc; overflow:hidden; padding-left:14.5em; padding-right:1em }
	dt { width:12.5em; font-weight:bold; background:orange; margin-left:-14.5em; text-align:right;  margin-bottom:1em; padding:.5em; float:left; clear:left; }
	dd{padding-bottom:1em; clear:right }
	dd+dd {padding-top:1em; border-top:1px dotted #000; margin-top:-1px;}
	dd+dd b{color:red}
	dd+dt{clear:both; margin-top:2em}
	dt+dd{margin-top:2em}
dt.c{clear:both; }
.h{float:right; width:100% }
</style>

</head>

<body>
     <dl>
          <dt>part1</dt>
          <dd class="top"><b>Part 1</b>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
               egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
          <dt > part2</dt>
          <dt>part3</dt>
          <dt class="c">a longer definition term;  part4</dt>
          <dd><b>Part 2 & 3</b>Lorem ipsum... ellentesque habitant morbi tristique senectus et netus et malesuada fames
               ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
               Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
               leo.aterials</dd>
          <dd ><b>Part 4</b>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
               egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
          <dt > part 5</dt>
          <dt class="c"> part6</dt>
          <dd class="h"><b>Part 5</b>Lorem ipsum... ellentesque habitant morbi tristique senectus et netus et malesuada fames
               ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
               Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
               leo.aterials</dd>
          <dd ><b>Part 6</b>Lorem ipsum... ellentesque habitant morbi tristique senectus et netus et malesuada fames
               ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
               Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
               leo.ateriapart</dt>

          <dt > part 7 & 8</dt>
          <dd class="h"><b>Part 7</b>Lorem ipsum... ellentesque habitant morbi tristique senectus et netus et malesuada fames
               ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
               Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
               leo.aterials</dd>
          <dd > <b>Part 8</b>Lorem ipsum... ellentesque habitant morbi tristique senectus et netus et malesuada fames
               ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
               Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
               leo.aterials</dd>
     </dl><p>ddd</p>
</body>
</html>
5

Starting simple:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}

dt {
  float:left;
  clear:left;
  width:12em;
  padding-bottom:0.5em;
}

dd {
  float:rigth;
  margin-left:14em;
  padding-bottom:1.2em;
}

</style>

</head>

<body>
     <dl>
          <dt>hey</dt>
          <dd>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
               egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
          <dt>hey you!!</dt>
          <dt>hey</dt>
          <dt>a longer definition term; terms could have that wrap.</dt>
          <dd>Lorem ipsum... ellentesque habitant morbi tristique senectus et netus et malesuada fames
               ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
               Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
               leo.aterials</dd>
          <dd>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
               tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
               egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
          <dt>hey</dt>
          <dd>XXellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
               egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
               libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
     </dl>
</body>
</html>

The only problem occurs when dt or dt category is exceding the height of corresponding dd or dd category.

6

Well I think that was my original problem. When the DL was stretched so wide the DD’s became so shallow that any multiple DT group caused the layout to break. I suppose I will have o weigh how bullet proof i need something to be when I use this technique. I just didnt know if I was missing some key piece of knowledge. … well more than I am usually missing.

Thanks Noonenope

7

So, for those special cases, bottom margin/padding should do.

<dd class=“lastDataLittleThenTitles”>

dd.lastDataLittleThenTitles {
/* so much margin/padding it would go over the height of the accompanying dt(s).*/
}

The only other option I can think of, is wrapping multiple dts in a single dt and multiple dds in a single dd. The definition permits(?) wrapping dt in a dt and dd in a dd: I mean it doesn’t explicitly forbid it, but it’s not in the content model either. I’m curious about the validation of a such construct.

<dt>
<dt1></dt1>
<dt2></dt2>
<dt3><dt3>
</dt>

<dd>
<dd1></dd1>
<dd2></dd2>
</dd>

so you will ALWAYS have a dt/dd pair.

Or, nesting dls, which you’ve mentioned. The problem is specific for the type of presentation you chose only. It’s a layout thing, not a dl thing.

8

Yeah… I was thinking if the difference didn’t seem too much margin/padding would be the solution, but it will never be fully bullet proof. some client from hell may ask for a list with 12 DTs and 4 DDs for example… ( of course I could make a special class for the last DD in that case too… but It wouldn’t be a site I can turn over a sa template for the client to update. Still I think it’s an ok solution.

I wasn’t going to NEST DLs because it would seem to me that that changes the semantics for the sake of the layout.

Which leads me to one last stupid Q. There is no semantic difference between the following:


<DL>
    <DT></DT>
     <DD></DD>
     <DD></DD>
     <DD></DD>
    <DT></DT>
    <DT></DT>
    <DT></DT>
     <DD></DD>
     <DD></DD>
    <DT></DT>
     <DD></DD>
     <DD></DD>
</DL>

and


<DL>
    <DT></DT>
     <DD></DD>
     <DD></DD>
     <DD></DD>
</DL>
<DL>
    <DT></DT>
    <DT></DT>
    <DT></DT>
     <DD></DD>
     <DD></DD>
</DL>
<DL>
    <DT></DT>
     <DD></DD>
     <DD></DD>
</DL>
9

In fact, there is.

If all dt and dd are in the same dl, it means they have a common ground. Being in separate dls should make them also separate in meaning.

Think about dictionaries: the proper language, slang, and urban. They all are dictionaries, but the terms and definitions aren’t related.

Or better yet, dictionaries for different spoken languages. You would make a different dl for English and a different dl for Romanian. And you wouldn’t separate in more parts the dl for one language.

10

Nesting DT/DD like that does not validate.
If it was permitted then it would validate.

It’s a layout thing, not a dl thing.
Yes, it is a layout problem that needs to be overcome. Not a DL problem.

To be more specific, it is just about handling your floats properly. In this situation we need a clearing element in the html since there is no way to set up any sort of auto/self clearing between the floats.

Here is how I did it:
Two-Column DL with Multi dt/dd | Nested Floated Span

I solved this by setting a class on the first DTs of each category (which needed clearing). I removed the float from those DTs and set them as display:block; with clear:both

Then a floated span was nested within the cleared DT. That cleared DT should not enclose the span so it’s height collapses.

That span will then be styled as all the other DTs and they will float and clear around each other accordingly.

(The link above had some extra classes added for setting margins differently between the sections)

Here is a bare bones example: (with 1px height and red BG on cleared DT for clarity)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Two-Column DL with Multi dt/dd | Nested Floated Span</title>
<style type="text/css">
div {
    width:90%;
    margin:0 auto;
}
h1 {
    margin:10px 0;
    font: bold 1.5em/1.2 arial;
    text-align:center;
}

/*=== Begin Test Code ===*/
dl {
    overflow:hidden;
    zoom:1;/*IE6 haslayout*/
    margin: 0;
    padding: 10px 10px 5px;
    background: #BBB;
}
dt, dt span {
    float: left;
    clear: left;
    width: 180px;
    margin: 0 0 5px;
    padding: 10px;
    font-weight: bold;
    text-align: right;
    background: lime;
}
dt+dt {background: palegreen;}

dt.clear {
    clear:both;
    float:none;
    display:block;
    width:auto;
    height:1px;
    margin:0;
    padding:0;
    background:red;
}
* html dt.clear {float:left; height:auto; margin-bottom:5px}
*+html dt.clear {float:left; height:auto; margin-bottom:5px}

dd {
    margin: 0 0 5px 210px;
    padding: 10px;
    background:#FFF
}

</style>

</head>
<body>

<div>
<h1>Two-Column DL with Multi dt/dd</h1>
<dl>
    <dt>Term 1-A</dt>
    <dt>Term 1-B<br>wrapping text</dt>
    <dd>
        Description 1-1: Lorem ipsum dolor sit amet consectetuer leo hac pellentesque Nulla pellentesque.
    </dd>
    <dd >
        Description 1-2: Lorem ipsum dolor sit amet consectetuer leo hac pellentesque Nulla pellentesque.
    </dd>
    
    <dt class="clear"><span>Term 2-A</span></dt>
    <dt>Term 2-B</dt>
    <dt>Term 2-C<br>wrapping text<br>wrapping text<br>wrapping text</dt>
    <dd>
        Description 2-1: Lorem ipsum dolor sit amet consectetuer leo hac pellentesque Nulla pellentesque. 
        Vitae dictum Pellentesque sodales tincidunt tincidunt pharetra In elit pharetra pellentesque. Condimentum Morbi 
        Vestibulum tincidunt volutpat faucibus suscipit pretium sed eros Suspendisse.
    </dd>
    <dd>
        Description 2-2: Lorem ipsum dolor sit amet consectetuer leo hac pellentesque Nulla pellentesque. 
        Vitae dictum Pellentesque sodales tincidunt tincidunt pharetra In elit pharetra pellentesque. Condimentum Morbi 
        Vestibulum tincidunt volutpat faucibus suscipit pretium sed eros Suspendisse.
    </dd>

    <dt class="clear"><span>Term 3</span></dt>
    <dd>
        Description 3-1:Lorem ipsum dolor sit amet consectetuer leo hac pellentesque Nulla pellentesque. 
        Vitae dictum Pellentesque sodales tincidunt tincidunt pharetra In elit pharetra pellentesque. Condimentum Morbi 
        Vestibulum tincidunt volutpat faucibus suscipit pretium sed eros Suspendisse.
    </dd>
</dl>
</div>

</body>
</html>
11

HOLLY Q^@%!%##$%!$@ RAY… (my name sake) … your explanation is quite clear… but I have to go back ans ee if I can do this myself now… thanks you guys!!!

12

Understandable reaction! :lol:

Great solution, Rayzur. :tup: