By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,072 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

Nested Lists

P: n/a
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>
Apr 20 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Apr 20, 2:23 pm, "James" <jame...@SPAMgraphics-line.co.ukwrote:
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.

Apr 20 '07 #2

P: n/a
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
Apr 20 '07 #3

P: n/a
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>
Apr 20 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.