Page 1 of 1
formating of definitions list
Posted: Wed Mar 09, 2011 11:39 am
by 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?
Re: formating of definitions list
Posted: Wed Mar 09, 2011 11:57 am
by garvinhicking
Hi!
Which line does not float correctly? maybe use <br style="clear:both"/>?
Regards,
Garvin
Re: formating of definitions list
Posted: Wed Mar 09, 2011 3:49 pm
by 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>
Re: formating of definitions list
Posted: Wed Mar 09, 2011 5:58 pm
by 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.
Re: formating of definitions list
Posted: Wed Mar 09, 2011 6:22 pm
by yellowled
konus wrote: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
Re: formating of definitions list
Posted: Wed Mar 09, 2011 6:30 pm
by 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
Re: formating of definitions list
Posted: Wed Mar 09, 2011 8:13 pm
by yellowled
Don Chambers wrote: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">
YL
Re: formating of definitions list
Posted: Wed Mar 09, 2011 9:08 pm
by 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!
Re: formating of definitions list
Posted: Wed Mar 09, 2011 9:59 pm
by 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.
Re: formating of definitions list
Posted: Wed Mar 09, 2011 11:31 pm
by yellowled
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
Re: formating of definitions list
Posted: Thu Mar 10, 2011 8:53 am
by 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!
Re: formating of definitions list
Posted: Thu Mar 10, 2011 11:16 am
by yellowled
konus wrote: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
Re: formating of definitions list
Posted: Thu Mar 10, 2011 4:24 pm
by 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!)
Re: formating of definitions list
Posted: Fri Mar 11, 2011 2:25 am
by yellowled
konus wrote:I give you the title Most Valued CSS-Advisor!
Just doing my job here.
konus wrote:(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
Re: formating of definitions list
Posted: Fri Mar 11, 2011 8:19 am
by konus
yellowled wrote:
Just doing my job here.
Thank you for beeing around.
konus wrote:(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.
