Link to home
Create AccountLog in
Avatar of slegy
slegy

asked on

Customized Definition List

I found this same question posed before and tried the listed solution but I'm not able to get it to work. I would like to create a definition list where the definition is to the right of the term on the same line:
     dt     dd
     dt     dd
     dt     dd
The solution listed is to add to the CSS:
dl {line-height: 1.2em;}
dd {position: relative;top: -1.2em;}

Here is my simple test:
 <div id="mainContent">
    <h3 align="center">&nbsp;</h3>
    <h3 align="center">Interpretations/Questions</h3>
    <p align="center">&nbsp;</p>
    <p>&nbsp;</p>
    <div id="interpretations">
    <dl>
      <dt>Question:</dt>
      <dd>What is</dd>
    </dl>
    </div>
    </div>
Here are the CSS entries:
#interpretations {
      font-size: 11px;
      }
#interpretations dl {
      line-height: 1.2em;
      }
#interpretations dd {
      position: relative;
      top: -1.2em;
      }
What have I missed:
Avatar of MacAnthony
MacAnthony
Flag of United States of America image

I know if you add:
float: left;

To the dd css block, it will put them on the same line, but I'm entirely sure that is exactly what you are looking for.
Avatar of slegy
slegy

ASKER

DL and DD are still on two lines.
Sorry about that. got them mixed up. The following code I think works reasonably. See if that is what you are looking for.
<html>
<head>
 
<style>
dt
{
        float: left;
}
</style>
</head>
<body>
Definition list
<dl>
<dt>test</dt>
<dd>A test to see if this works</dd>
<dt>test 2</dt>
<dd>An extra item for good measure</dd>
</dl>
</body>
</html>

Open in new window

Avatar of slegy

ASKER

When I tested your code without any of my tenplates or CSS the <dd> appears on a line below the <dt>.
Are you saying that the other code that I got from one of the previous solutions is not needed?
ASKER CERTIFIED SOLUTION
Avatar of MacAnthony
MacAnthony
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of slegy

ASKER

You are absolutely correct. I had an error in my CSS. Thank you very much.