CSS lists with complex content

css list

[goaliegigs]

Hi,

I'm trying to create a list with game times and locations, such as:

<ul>
 <li>
  <span class="game_time">Sept 1, 2pm-3pm</span>
  <span class="location">Toronto</span>
 </li> 
</ul>

However, I find I'm unable to make each span tag the appropriate width even if I set the width values in my rules. I am wondering if I shouldn't be using span tags in this manner and if there is another way I could better structure this data?

I have done some searching on sites like A List Apart. Most sites have an example where you have an anchor tag with a span tag after that, but if I don't want an anchor tag I'm not sure how to go about this.

Any help is appreciated.

Thanks,
Steve

[D_Blackwell]

You are probably using the <span> inappropriately for the desired results. The HTML should display one line of text within the <li>. Putting width: on these spans is probably not the way to go. <span> is usually added to make an inline declaration that changes the text from other text in the block. It can also be used for :hover popup tricks and such and be used inline, inline-block, block.....

My first guess is that you are simply wanting each span to be a certain width so that everything lines up nicely. A table wouldn't necessarily be inappropriate. <dl> is an underused tool that can be styled to accomplish many tasks.

That said, you can make the spans work within the <li>. If you've got a goodly list, that is a lot of <span> hacking though; cumbersome and crude.

li {
list-style-type: none;
}
.game_time {
width: 20em; border: .1em solid red; display: inline-block; text-align: center;
}

.location {
width: 20em; border: .1em solid blue; display: inline-block; text-align: center;
}

[goaliegigs]

Hi there,

Thanks - I am considering use of DL's, but as far as I understand they work on the principle of paired data. While I provided a simple example in my posting, I have more complex examples (ie: ones in which I would have 3 or 4 span tags perhaps in the same li).

I am basically trying to do something like what you see here, except I don't employ anchors in my content:

<snip>

I like the inline-block specification you provided, I'm going to give that a shot although I realize it may be crude.

Thanks,
Steve

[edited by: swa66 at 6:02 pm (utc) on Sep. 28, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]

[D_Blackwell]

I am considering use of DL's, but as far as I understand they work on the principle of paired data.

Multiple <dd> associated with a <dt> in a <dl> are common and not a problem at all. For example, dictionary type <dt> may have varying needs for the number of associated <dd>. The key is the what and why of the design to decide if it is a good choice for your needs.

[swa66]

The logical approach in the html seems to be something like:

<dl>
<dt>Sept 1, 2pm-3pm</dt>
<dd class="location">Toronto</dd>
<dt>Sept 2, 2pm-3pm</dt>
<dd class="location">Toronto</dd>
<dd class="promo">Seats available</dd>
</dl>

or something like

<dl>
<dt>Next Game</dt>
<dd class="game_time">Sept 1, 2pm-3pm</dd>
<dd class="location">Toronto</dd>
</dl>

The first step is to make sure you have html that makes sense.
Once you have done that, think about styling the html.

[goaliegigs]

Ah great. Thanks for the example. I'll try that out.