12 replies [Last post]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I have some content which screams definition list and a design which calls for each new term to start on a new line and the definition to follow the term as a continuation on the same line. Which is pretty much how dictionaries are organised. e.g.

Quote:
Term definition...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pede dolor, pellentesque non, congue id, malesuada et, tellus. Cras orci nisl, porttitor sed, commodo non, scelerisque quis, dui. Quisque non
Next term next definition...Etiam condimentum eros id odio. Maecenas nunc wisi, placerat sit amet, euismod ac, dapibus vitae, arcu. Integer nonummy facilisis nibh.

Any ideas on how to style this and keep the definition list.

fwiw, I can get Opera to behave by using clearfix without the clear:both, e.g.

dt:before {
  display:block;
  content: '.';
  height: 0;
  visibility: hidden;
}

However, Firefox and IE (obviously) don't play ball.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 6 years 4 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

where is your doctype? haha.

where is your doctype?
haha.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 17 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9224
Points: 3230

Is there reason not to do it

Is there reason not to do it like so?

dt {
    float: left;
    font-weight: bold;
    clear: left;
    margin-right: .5em;
    }

dd {
    margin: 0;
    padding: 0;
    }
================
<dl>
  <dt>Term</dt>

  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Vivamus ligula felis, varius vitae, mattis vel,  
    ultrices vel, justo. Quisque tempor.
  </dd>

  <dt>Another term</dt>

  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing  
    elit. Vivamus ligula felis, varius vitae, mattis vel,  
    ultrices vel, justo. Quisque tempor.
  </dd>
</dl>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 weeks 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15659
Points: 2797

I think the problem is that

I think the problem is that chris wants/needs the dt to act as though it were display:run-in

The closest I could get ( seems to work in FF, Opera )
edit/oops, erm and which is exactly the same as Gary's example so I guess I echo the question 'is it not this simple' Chris?

/**/


dt term

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec luctus. Cum sociis
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Ut in mauris.
Nulla viverra odio bibendum sem. Nulla posuere
risus eget mauris. Maecenas

dt term

adipiscing elit. Donec luctus. Cum sociis
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Ut in mauris.

dt term

adipiscing elit. Donec luctus. Cum sociis
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Ut in mauris.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

floating does work if the

I should have said, I'd tried floating. It doesn't work if the term is long enough to spread on to a second line.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 weeks 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15659
Points: 2797

Hmm, your right didn't think

Hmm, your right didn't think to check for that, so it is not as simple as thought Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 17 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9224
Points: 3230

Chris, With the current

Chris,

With the current lack of support for {display: run-in;}, I think you're stuck with adding one more element of structure, the <br />. Like so,

dt {
    display: inline;
    font-weight: bold;
    }

dt:after {
    content: ":\a0\a0";
    }

dd {
    display: inline;
    margin: 0;
    padding: 0;
    }
============
 <dt>Term</dt>

  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Vivamus ligula felis, varius vitae, mattis vel, ultrices vel,
justo. Quisque tempor.<br /></dd>

<dt>Another term</dt>

<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus
ligula felis, varius vitae, mattis vel, ultrices vel, justo. Quisque
tempor.<br /></dd>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 weeks 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15659
Points: 2797

Great minds think alike

Great minds think alike Gary, I tried seting both DT and DD to display:inline and adding a BR tag in the DD which worked but wasn't able to gain separation between groups, so gave up with that and decided not to post it as a suggestion :rolleyes: tried adding a margin to the BR but that just took with it the last line of text.

Stoppress: I tried this and the results work in FF

br {display:block; margin-bottom: 1em}

dt,dd {display:inline}

<br /></dd>

of course IE6 seems to ignore this!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 17 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9224
Points: 3230

From Chris's example, I

From Chris's example, I inferred a break was not required. If it is, either of

… <p><!----></p></dd> or,

… <br /><br /></dd> will work.

I believe the break tags would be more structurally correct.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 weeks 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15659
Points: 2797

I can cope with the idea of

I can cope with the idea of one BR tag as having it's place at times and don't scorn it as many seem to do but confess I feel slightly uneasy when we start to use them in multiples; however I think that in light of IE not seemingly willing to style the BR (not sure it should be styleable really?) then I would go with that option and I think definitely over an empty <p>

As to whether Chris wanted a spacing between the pairs, it's not clear but it sure looks as though it would benefit from a small amount?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ah ok. I was going to swap

Ah ok. I was going to swap to an ordinary list and use a span (or strong) for the term. I'll try the BR method.

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 17 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9224
Points: 3230

Progressive enhancements

Well, a slightly larger font and a bold weight for the term gives some visual separation. Then Opera and Safari/Konqueror can add the benefits of :after. Firefox then adds spacing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
  <head>
    <title></title>
    <meta name="generator"
          content=
          "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
    <meta http-equiv="content-type"
          content="text/html; charset=utf-8" />
    <meta name="editor"
          content="Emacs 21" />
    <meta name="author"
          content="Gary Turner" />
<style type="text/css">
  /*<![CDATA[*/
html, body {
    margin: 0;
    padding: 0;
    }

body {
    font: 84% verdana, helvetica, sans-serif;
    line-height: 1.4;
    color: black;
    background-color: white;
    }

p {
    font-size: 1em;
    }

dl {
    padding: 0 1.4em;
    }

dt {
    display: inline;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.3;
    }

dt:after {
    content: ":\a0\a0";
    margin-left: -.25em;
    }

dd {
    display: inline;
    margin: 0;
    padding: 0;
    }

dd br {
    line-height: 2.8em;
    vertical-align: top;
    }

dd:last-child br {
    line-height: 1.4;
    }

/*]]>*/
</style>

  </head>
  <body>
    <dl>
      <dt>
        Term
      </dt>
      <dd>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Vivamus ligula felis, varius vitae, mattis vel, ultrices
        vel, justo. Quisque tempor.<br />
      </dd>
      <dt>
        Another term
      </dt>
      <dd>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Vivamus ligula felis, varius vitae, mattis vel, ultrices
        vel, justo. Quisque tempor.<br />
      </dd>
      <dt>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Suspendisse odio. Phasellus dui. Fusce rutrum molestie
      </dt>
      <dd>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Vivamus ligula felis, varius vitae, mattis vel, ultrices
        vel, justo. Quisque tempor.<br />
      </dd>
    </dl>
    <p>
      Just a normal paragraph.
    </p>
  </body>
</html>

Looks like a plan to me; to heck with what Chris wanted. It took on a life of its own. Laughing out loud :shrug:

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 weeks 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15659
Points: 2797

kk5st wrote: Looks like a

kk5st wrote:

Looks like a plan to me; to heck with what Chris wanted. It took on a life of its own. Laughing out loud :shrug:

cheers,

gary

Looks good! restraining the width of the DL works best, either relative or fixed , keeps the run-in nature of the dt to dd together.

oh I had long since lost track of what Chris was after Laughing out loud was just interesting as a styling exercise, and methinks I rather like it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me