list item - problem

list item paragraph style

[gtka]

Hi , im trying to create a list item where each "bullet" contains a description for the bullet! For example:

////////////////////////////////////////////
* Books
__We offer books in low prices....

* CDs
__We offer cds in low prices....

* DVDs
__We offer the same as above..........

////////////////////////////////////////////
where the underscore is the text indent.

How can i manage it without using tables, just with list items? I would like to have some styling in the list item (other text color for "books" other for the description, smaller line height for the description paragraph etc).

Any help please?

[swa66]

Would it not be something (considering the content you have) for a <dl> ?
That way you have a natural set of <dt> and <dd> to render as you please.

[kas187]

You can do this using a nested unordered list so in your example you can do the follwing:
<ul>
<li>Books
<ul>
<li>We offer books in low prices</li>
</ul>
</li>
<li>CDs
<ul>
<li>We offer cds in low prices</li>
</ul>
</li>
<li>DVDs
<ul>
<li>We offer the same as above</li>
</ul>
</li>
</ul>

You can then use css to style your list items accordingly.

[swa66]

I'm afraid we're collectively over-using <ul>, just like we went overboard on <table> in the past.

Doesn't

<dl>
    <dt>Books</dt>
    <dd>We offer books in low prices</dd>
    <dt>CDs</dt>
    <dd>We offer cds in low prices</dd>
    <dt>DVDs</dt>
    <dd>We offer the same as above</dd>
</dl>

look much simpler in the html? and we should be able to style it just as well usign CSS.

[Setek]

Not only looks simpler, but is the best/most semantic markup to use for the data structure of key-value pairs.

[Dave75]

I'd go with something like:

<ul>
<li>Books<span>We offer books in low prices</span></li>
<li>CDs<span>We offer cds in low prices</span></li>
<li>DVDs<span>We offer the same as above</span></li>
</ul>

ul li span{display:block;}

Add classes and/or ids where appropriate. :)

[edited by: Dave75 at 6:40 am (utc) on May 28, 2008]

[Setek]

But Dave75, that's fairly unindicative of the data set.

Lets say you read it without CSS. What would you be reading?

BooksWe offer books in low prices

(sic)

There's something wrong with that -- whereas definition lists' entire purpose is to define items. There is a list of items, and there is a list of definitions attached to those items.

You know, considering the data set is key-value pairs, it's actually MORE indicative and understandable to put it in a table than use an unordered list with spans.

[edited by: Setek at 6:57 am (utc) on May 28, 2008]