Definition Lists How to manipulate the looks

What is this page?

This page is one of the test and example pages in the PretLetters website. This example page is about one kind of list. In HTML 4.01 Strict you can use different kind of lists:

With CSS you can influance the looks of those lists. This page offers an example of influencing the looks of a Definition List by styling two of the three elements it is constructed with.

What do I get to see here?

What follows, is one list with five definitions (of which two are dummys just to make it more of a list :-) ). The list is styled in various ways as can be seen in the source of this page, without using any classes. It uses elements as selectors.

There are now five versions. One (the first) as I created while solving the problem as posted on usenet (see last few paragraphs in this page). The other four use a solution that someone else came up with, a different approach each time, while I was creating this page and later.

Example created by PretLetters

Definition List
A list that holds various definitions. If properly marked up in HTML 4.01 Strict, the list itself is marked up with <dl> and its closing tag, the definition term is marked up with <dt> and its closing tag, and finally the definition description is marked up with <dd> and its closing tag.
Such a list is this vary list you're now reading.
term
a not so long defnition for the term
term
and a much longer definition for the term; supposed to wrap to a new line, so the effect of the styles are visible.
Cascading Style Sheet
A Cascading Style Sheet, or CSS for short, is some code in plain text that holds the definitions/suggestions for the looks and layout of the pages you serve from your server to the visitors browser.
It can be in a seperate file or you can put it in the <head> part of your marked up page.
Markup
Markup, of which Hyper Text Markup Language is most commonly used (usually version 4.01), is what you use to 'tell' a browser what it is that is in your page. Is something a header? Or a paragraph or list? What sort of a list do you present? An ordered or unorderderd list, or a definition list such as this? Markup makes that clear so the browser knows how to handle your content (of it is a proper browser that is).

Example as proposed by Els

One of the others is Els, a regular from ciwas. Actually: she is the one who came up with the 'float:left;' property for the <dt>. At first I had 'display:run-in' for that element, which appears to be supported by Opera only (IE and FF don't handle it very well).

Definition List
A list that holds various definitions. If properly marked up in HTML 4.01 Strict, the list itself is marked up with <dl> and its closing tag, the definition term is marked up with <dt> and its closing tag, and finally the definition description is marked up with <dd> and its closing tag.
Such a list is this vary list you're now reading.
term
a not so long defnition for the term
term
and a much longer definition for the term; supposed to wrap to a new line, so the effect of the styles are visible.
Cascading Style Sheet
A Cascading Style Sheet, or CSS for short, is some code in plain text that holds the definitions/suggestions for the looks and layout of the pages you serve from your server to the visitors browser.
It can be in a seperate file or you can put it in the <head> part of your marked up page.
Markup
Markup, of which Hyper Text Markup Language is most commonly used (usually version 4.01), is what you use to 'tell' a browser what it is that is in your page. Is something a header? Or a paragraph or list? What sort of a list do you present? An ordered or unorderderd list, or a definition list such as this? Markup makes that clear so the browser knows how to handle your content (of it is a proper browser that is).

Yet another solution from Gerard

Gerard Talbot (alas, no site I know off) provided the next possible solution. He uses 'display:compact;' for the definition term element. This results in:

Definition List
A list that holds various definitions. If properly marked up in HTML 4.01 Strict, the list itself is marked up with <dl> and its closing tag, the definition term is marked up with <dt> and its closing tag, and finally the definition description is marked up with <dd> and its closing tag.
Such a list is this vary list you're now reading.
term
a not so long defnition for the term
term
and a much longer definition for the term; supposed to wrap to a new line, so the effect of the styles are visible.
Cascading Style Sheet
A Cascading Style Sheet, or CSS for short, is some code in plain text that holds the definitions/suggestions for the looks and layout of the pages you serve from your server to the visitors browser.
It can be in a seperate file or you can put it in the <head> part of your marked up page.
Markup
Markup, of which Hyper Text Markup Language is most commonly used (usually version 4.01), is what you use to 'tell' a browser what it is that is in your page. Is something a header? Or a paragraph or list? What sort of a list do you present? An ordered or unorderderd list, or a definition list such as this? Markup makes that clear so the browser knows how to handle your content (of it is a proper browser that is).

Problem with this solution is that I don't see the effect that OP wanted, the 'run-in' of the term. I don't see anything special happening with IE, FF or Op. Hmmmm...

Busy Gerard provided yet another solution, this time utilizing the 'display:run-in;' property/value for the <dt> element. I tried that before him, but appearantly not everybody reads all reply's. Anyway, this is why I quit using it:

Definition List
A list that holds various definitions. If properly marked up in HTML 4.01 Strict, the list itself is marked up with <dl> and its closing tag, the definition term is marked up with <dt> and its closing tag, and finally the definition description is marked up with <dd> and its closing tag.
Such a list is this vary list you're now reading.
term
a not so long defnition for the term
term
and a much longer definition for the term; supposed to wrap to a new line, so the effect of the styles are visible.
Cascading Style Sheet
A Cascading Style Sheet, or CSS for short, is some code in plain text that holds the definitions/suggestions for the looks and layout of the pages you serve from your server to the visitors browser.
It can be in a seperate file or you can put it in the <head> part of your marked up page.
Markup
Markup, of which Hyper Text Markup Language is most commonly used (usually version 4.01), is what you use to 'tell' a browser what it is that is in your page. Is something a header? Or a paragraph or list? What sort of a list do you present? An ordered or unorderderd list, or a definition list such as this? Markup makes that clear so the browser knows how to handle your content (of it is a proper browser that is).

You will see the intended effect in Opera, but you wont in Internet Explorer or in Firefox. So, although correct, it is useless.

A Whole different approach as proposed by Jukka

As always on usenet people approach described problems from different angles, which gives different solutions even for non-existent problems :-) . One of the people you can always count on to come with something of outside the box is Jukka, another regular at the www.authoring groups of usenet.

This is a quite different approach (turn to the source code to see why):

Definition List: A list that holds various definitions. If properly marked up in HTML 4.01 Strict, the list itself is marked up with <dl> and its closing tag, the definition term is marked up with <dt> and its closing tag, and finally the definition description is marked up with <dd> and its closing tag.
Such a list is this vary list you're now reading (Which in this case is not true.).

term: a not so long defnition for the term.

term: and a much longer definition for the term; supposed to wrap to a new line, so the effect of the styles are visible.

Cascading Style Sheet: A Cascading Style Sheet, or CSS for short, is some code in plain text that holds the definitions/suggestions for the looks and layout of the pages you serve from your server to the visitors browser.
It can be in a seperate file or you can put it in the <head> part of your marked up page.

Markup: Markup, of which Hyper Text Markup Language is most commonly used (usually version 4.01), is what you use to 'tell' a browser what it is that is in your page. Is something a header? Or a paragraph or list? What sort of a list do you present? An ordered or unorderderd list, or a definition list such as this? Markup makes that clear so the browser knows how to handle your content (of it is a proper browser that is).

Note

This example was setup in response to a question on usenet, in newsgroup ciwas: how to not insert a new line after <dt> in a <dl> ?.

If you like this example, think it is useful, you could pay us a visit at PretLetters or at the section about Webdesign. The site is in Dutch though.

Maybe the index of the test area, of which this page is part, is worth checking out too, since in that part of my site I play around a bit. There might be something worth your while related to the main topic of this current page.

If you liked what you saw and I helped you out a bit with something, you could consider contributing something small so I can continu to put efford in this site. With that you help me to help you and others. Please visit my page (in Dutch) on bijdragen, contributions and donations. Thank you,