formating of definitions list

[konus]

Hello,
I would like to get some help with css for styling a definition list (dl).

In the list, DT and DD should be in one line and right beside of an image. I already solved this and used it in this example.

In one DD I used a linebreak <br /> Now I have the problem, that this line does not float correct, if I resize the browserwindow to a small amount.

Here is my user.css

Code: Select all

.serendipity_entry dl dt {
    float: left;
    font-weight: bold;
    margin-bottom: 1em;
    width: 50px;
    }

.serendipity_entry dl dd {
    clear: right;
    margin-bottom: 1em;
}

What did I miss?

[garvinhicking]

Hi!

Which line does not float correctly? maybe use <br style="clear:both"/>?

Regards,
Garvin

[konus]

Thank you, but a <br style="clear:both"/> leads to the result, that the list continues under the images. That is not what I would like to achieve.


This is the line with the manually line-break.


And that is, what it looks like, if the special line gets to long. The line starts now in the DT column and not in the DD column.
Lines without a line-break behave right. The problem is persistent in all browsers, so I missed something.

Here is the HTML-Code I used (shortened)

Code: Select all

<dl>
  <dt>term A</dt><dd>description of term A</dd>
  <dt>term B</dt><dd>First line<br />second line description of term B</dd>
</dl>

[ockmonix]

But the problem seems to exist even if you remove the <br /> tag. You could try and wrap the line with a <span style=“display: block“>...</span>. But i'm not convinced that it will work out.

[yellowled]

In one DD I used a linebreak <br /> Now I have the problem, that this line does not float correct, if I resize the browserwindow to a small amount.

Very simple solution: Don't use a <br />. Did you know that you can actually use something like this?

Code: Select all

<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
</dl>

That's perfectly valid (X)HTML, and it should work (no guarantee, though ) with your CSS nicely, even on smaller resolutions. Plus, the clear: right; on the dd seems obsolete.

YL

[Don Chambers]

Something else to keep in mind is that this is not your only definition list. For example, http://www.dd4kids.de/archives/2011/03/summary.html

[yellowled]

Something else to keep in mind is that this is not your only definition list.

... which is easy to solve. Just give that particular dl an id: <dl id="whatever">

Code: Select all

#whatever dl { ... }

YL

[konus]

@Yellowled: Thank you for the advice! Unfortunately using a second dd line does not help. Now the second line always starts at the beginning.

@Don Chambers: Yes, I forgot about them. I even think, there is no link to them on the surface of my blog, but anyway using .entry-content instead of .serendipity_entry did the trick. Thank you!

[konus]

The problem is, that my definition list is already floated beside an Image. Thats why the usual way with clear the float left does not work. If somebody has an idea, I have setup the case here for online test.

[yellowled]

If somebody has an idea, I have setup the case here for online test.

Something like http://jsfiddle.net/PypWW/7/ should work (expand the Results area to see how it's supposed to work if the result seems odd). Probably needs some tweaking in the live environment for the max-width of the dl. Also, it should be #whatever, #whatever dt etc. of course (in my first response).

YL

[konus]

Thank you yellowled! I implemented a slightly modified version of the provided solution now in my blog.

It is better than the first version, but not perfect. Now the dl-block does not scale and has a fixed width if he floats beside of the image. If the space is not wide enough, the block jumps under the image.

However, I consider the problem solved. Thank you all for the very fast help!

[yellowled]

Now the dl-block does not scale and has a fixed width if he floats beside of the image. If the space is not wide enough, the block jumps under the image.

Well, a floated element needs some kind of width, otherwise the float won't work. It also depends on the kind of zoom the browser uses -- text-only zoom in FF works fine.

You could try max-width in %, i.e. 50% seems to work nicely. (BTW, it really doesn't need to scale for more than 2 zoom levels. Anybody who'd need to zoom more than 2 levels probably uses a screenreader anyway. )

YL

[konus]

Thank you Matthias! After using max-width: 60% instead of max-width: 300px I am even more satisfied. It is pretty close to perfect.
I give you the title Most Valued CSS-Advisor!

(I still have problems to understand, why the attribute max-width actually behaves as a min-width in this case. But anyway, it works!)

[yellowled]

I give you the title Most Valued CSS-Advisor!

Just doing my job here.

(I still have problems to understand, why the attribute max-width actually behaves as a min-width in this case. But anyway, it works!)

Actually, it doesn't. The one element which ultimately determines the min-width of the dl is the dd containing the url -- since the url can't be word-wrapped. So your min-width here is the width of the url (186px) + padding of the dd (10px) + fixed width of the dt (50px) = 244px.

YL

[konus]

Just doing my job here.

Thank you for beeing around.

(I still have problems to understand, why the attribute max-width actually behaves as a min-width in this case. But anyway, it works!)

Actually, it doesn't. The one element which ultimately determines the min-width of the dl is the dd containing the url -- since the url can't be word-wrapped. So your min-width here is the width of the url (186px) + padding of the dd (10px) + fixed width of the dt (50px) = 244px.
YL

I think this is not correct. I changed the length of the url to a very short term, but the min-width did not change. The only way to change the min width I found, is to change max-witdh in css.