Nested Lists

[James]

I'm having trouble trying to put 3 definition lists into a unordered list
which has been styled to appear horizontally. My goal is to have the 3
definition lists appear side by side and fill the parent box's width. I've
tried giving the <dtelement a narrow width, allowing room for the all
three, but i've had no success. I'd like, if possible, to do this without
specifying any widths as i'll be conditionally hiding one or maybe two
columns using server side mark-up and i'd like any remaining definition
lists to fill the parent box's width in these cases.

Any ideas if and how this can be acomplished?

Thanks
James
<style type="text/css">
<!--
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline;
}
-->
</style>

<ul>
<li>
<dl>
<dt>Types</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
</dl>
</li>
<li>
<dl>
<dt>Options</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
</dl>
</li>
<li>
<dl>
<dt>Accessories</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
</dl>
</li>
</ul>

[David Dorward]

On Apr 20, 2:23 pm, "James" <[e-mail]:

I'm having trouble trying to put 3 definition lists into a unordered list

Looking at your markup, you shouldn't be doing that anyway.

You seem to have three lists each containing one term, instead of one
list containing three terms.

[James]

Hi David, thanks for your response

Looking at your markup, you shouldn't be doing that anyway.

Do you mean in terms of being semantically correct or because it will not
work?

You seem to have three lists each containing one term, instead of one
list containing three terms.

Fair enough. Would you care to share with us what css / html you'd use to
accompish the task?

Many Thanks
James

[Ben C]

On 2007-04-20, James <ja*****@SPAMgraphics-line.co.ukwrote:

I'm having trouble trying to put 3 definition lists into a unordered list
which has been styled to appear horizontally. My goal is to have the 3
definition lists appear side by side and fill the parent box's width. I've
tried giving the <dtelement a narrow width, allowing room for the all
three, but i've had no success. I'd like, if possible, to do this without
specifying any widths as i'll be conditionally hiding one or maybe two
columns using server side mark-up and i'd like any remaining definition
lists to fill the parent box's width in these cases.

Any ideas if and how this can be acomplished?

The basic problem is you're making li { display: inline; } but then
putting block-level things inside it.

display: inline-block (and setting width on the li) would be perfect. An
inline-block sits on the line but can have block-level things inside it.
An inline box on the other hand can't contain block boxes. Instead
anonymous block boxes are generated around its inline content so you get
a series of block boxes.

Note: I'm talking about the generated CSS boxes here, not the HTML
elements. An HTML element with display: inline can of course contain
elements with display: block, although an HTML element classified as
"inline" in the HTML sense cannot contain elements classified as "block"
in the HTML sense. I am making this sound more confusing than it is.

An example: <em>a<p></p>b</emis invalid HTML. It also happens that
<emis display: inline by default and <pdisplay: block. But
<div>a<div></div>b</divis valid HTML, and I can set display: inline on
the outer <divand display: block on the inner one. That is valid CSS,
but results in the generation of three block boxes: an anonymous one
around "a", one for the inner div, and an anonymous one around "b".

But display: inline-block is not widely supported, so the practical work
around is

li
{
float: left;
width: 200px; /* or something */
}

If you don't set width the lis will be as wide as the screen anyway for
most screens and font-sizes since you've got masses of stuff in those
<dd>s. If you want to divide the screen width evenly between the lis
you've got without setting widths explicitly on them, floats with
percentage widths is an option if you know how many are visible.
Otherwise use a table.

>
<style type="text/css">
<!--
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline;
}
-->
</style>

<ul>
<li>
<dl>
<dt>Types</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
</dl>
</li>
<li>
<dl>
<dt>Options</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
</dl>
</li>
<li>
<dl>
<dt>Accessories</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vel est. Nullam sem pede, porta ut, fermentum sed, rhoncus sed, ante.
Suspendisse pellentesque nisl vel risus. Nam quis arcu in.</dd>
</dl>
</li>
</ul>