Specially formatted DLs or tables?

[synotic]

I am working on a site for someone using CSS and I've run into a problem. On the site there will a list of years and within the years there will individual dates which people can then click on. I decided to use a DL and it looks like this:

2003: 
......February 9th 
2002: 
......November 3rd 
......September 15th 
......March 2nd 
2001: 
......November 3rd 
......September 15th 
......March 2nd 

Which personally looks fine to me but the guy wants it to look more like this:

2003: February 9th 
2002: November 3rd 
......September 15th 
......March 2nd 
2001: November 3rd 
......September 15th 
......March 2nd

It's essentially the same but the DD is next to the DT. Is this possible? A misuse of DL? Should I just use tables? Oh, and I can't use monospaced font. Thanks :)

[aevea]

could you use a negative margin-top on the dd elements?

[hafnius]

Hi synotic

I personally would put this content into tables, since it is clearly table data. That is what tables were meant for.

It could also be accomplished with css either with display:inline or some floating (just loose thoughts) but that would be to complicated compared to tables.

I have an instinct against using tables for anything but there is a time and a place for anything :)

Kind Regards
Hafnius

[killroy]

If you inline it, it'll work fine, and will be very easy to set up.

But I agree with above. This is NOT a definition list. Don't use things because they roughly match the look you want to achive, that's 100% anti-CSS philosophy. Use the mark up that matches the purpose of your content, then CSS style it.

A table might seem like a good idea, but I don't think this is tabular data at all. You're not showing rows VS columns, records VS fields. Unless you want to label them "year,month", which I don't think makes much sense.

I think this is a nested list. A list of years, each of which contains a list of dates:

<ul>
<li>2003:<ul>
<li>February 9th</li>
</ul></li>
<li><li>2002:<ul>
<li>November 3rd</li>
<li>September 15th</li>
<li>March 2nd</li>
</ul></li>
<li>2001:<ul>
<li>November 3rd</li>
<li>September 15th</li>
<li>March 2nd</li>
</ul></li>
</ul>

And then use styling to remove the bullets and adjust the padding.

You can achieve any look you like, including the one you want, and you produce semantically correct mark-up.

Happy Styling!

SN

[edited by: killroy at 10:21 am (utc) on Aug. 25, 2003]

[BlobFisk]

I agree with hafnius on this one - it is a clear place to use a table.

This is tabular data, a heading row/column and a data row/column.

Use the KISS [acronymfinder.com] principle and use a table.

Don't forget the table summary though!

[SuzyUK]

Hi..

Yes in answer to your original question it is possible:

just float the <dt> and give it a width, then giv the <dd> a margin of the same value as the width of the dt..

e.g.
dt {float: left; width: 150px;}
dd {margin-left: 150px;}

It may or may not be that this is "tablular data" but if you've already got the <dl>'s in place then this will save you having to re-mark-up your page ;)

Suzy

[synotic]

Thanks for all the messages :)

First of all I thought about using a table but in the end decided that I didn't really consider it tabular enough. I mean I only have one column of data.

aevea: I actually tried that but I don't know if it was bad coding or what but I came up with some very unexpected results.

I also did try inlining it. But both the DD and DTs are block elements. And both have to be made inline to actually do anything. Then you have to use individual classes to make things go where you want them. And then you have to recreate the margins you want. In the end way too messy a solution.

killroy, I actually decided to go with your idea (well I did it before I saw your message, sorry!). It really is just a list with some sub lists. I did some minor styling but for the most part it looks like a normal UL (the first LI isn't next to the title) and he's happy... go figure.

Also, I believe very strongly in using items for their purpose. (In fact if anyone wants to help me with this [webmasterworld.com] I'd appreciate it. Even just a "no don't do that... conform with everyone else" would be great) I don't use B, I, BR tags etc... I even cringe when I have to use DIV or SPAN tags. If what I need already exists I use it and then style it appropriately. I know that I have seen DL being used as a glossary type thing. But I somewhat thought of it as a "defined" list. A type of list that was meant to have sub-lists. Sub-lists that further defined the items in the main list. I guess I misinterpreted this though :) I definitely did not choose a DL for it's appearance... If I did I wouldn't be posting here! I am sure I could style the current UL to match his previous wishes but for now he likes it.

SuzyUK, in response to your suggestion, that would probably work. Of course I'd have to use ems because my design is completely liquid but "2003", "2004" are all pretty much the same length. So in the end it wouldn't really matter. However, it is good to know.

Again, thanks for your help. I've learned a lot of new things.