Horizontal nested list

Lee K. Seitz

I'm still relatively new to stylesheets. I'm trying to do something
that seemed fairly simple on the surface, but is proving to be a
challenge. I have a set of nested lists:

<ul>
<li>Side One</li>
<ul>
<li>Pac-Man Fever</li>
<li>Froggy's Lament</</li>
<li>Ode to a Centipede</</li>
<li>Do the Donkey Kong</</li>
</ul>
<li>Side Two</li>
<ul>
<li>Hyperspace</</li>
<li>The Defender</</li>
<li>Mousetrap</</li>
<li>Goin' Berzerk</</li>
</ul>
</ul>

Rather than the typical display, I'd like to display sides one and two
side by side, like this:

Side One Side Two
Pac-Man Fever Hyperspace
Froggy's Lament The Defender
Ode to a Centipede Mousetrap
Do the Donkey Kong Goin'Berzerk

(Yes, I'd like to avoid the bullets as well, but that part is easy.)

Any suggestions on good ways to do this? I've tried floating Side One
left, but then Side Two either overlaps it or does other odd things.
I really don't have a handle on positioning yet, but I tried this:

<ul style="list-style-type: none;">
<li>Side One</li>
<ul>
<li>Pac-Man Fever</li>
<li>Froggy's Lament</</li>
<li>Ode to a Centipede</</li>
<li>Do the Donkey Kong</</li>
</ul>
<li style="position: relative; top: -6em; left: 15em;">Side Two</li>
<ul style="position: relative; top: -6em; left: 15em;">
<li>Hyperspace</</li>
<li>The Defender</</li>
<li>Mousetrap</</li>
<li>Goin' Berzerk</</li>
</ul>
</ul>

That worked as far as getting Side Two and its sublist (Hyperspace,
etc.) where I want it, but leaves a big gap where they usually would
be in Netscape 6 and Opera 7. (There more text after these nested
lists.) It also renders very badly in IE 6. It seems the sublist
continues displaying where the "Side Two" item leaves off, so the
above in IE 6 renders that sublist above and to the right of all of
the previous list.

However, leaving out the positioning on the third ul puts that sublist
down directly below Do the Donkey Kong in Netscape and Opera. Only
"Side Two" is positioned as I want.

I hope that made sense. Help?

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
Don't panic!

Jul 20 '05 #1

Neal

On Wed, 04 Feb 2004 07:01:12 -0000, Lee K. Seitz <lkseitz .at. hiwaay
@dot@ net> wrote:

Rather than the typical display, I'd like to display sides one and two
side by side, like this:

Side One Side Two
Pac-Man Fever Hyperspace
Froggy's Lament The Defender
Ode to a Centipede Mousetrap
Do the Donkey Kong Goin'Berzerk

I assigned a class to the primary list items and styled it. Also styled
the whole ul to ensure that following content will not be able to start
next to it.

ul {
width: 100%;
}

li.primary {
display: block;
width: 45%;
float: left;
}

And the HTML - note the way I've nested the lists!

<ul>
<li class="primary">Side One
<ul>
<li>Pac-Man Fever</li>
<li>Froggy's Lament</li>
<li>Ode to a Centipede</li>
<li>Do the Donkey Kong</li>
</ul>
</li>
<li class="primary">Side Two
<ul>
<li>Hyperspace</li>
<li>The Defender</li>
<li>Mousetrap</li>
<li>Goin' Berzerk</li>
</ul>
</li>
</ul>

Jul 20 '05 #2

Matthias Gutfeldt

Lee K. Seitz wrote:

I have a set of nested lists:

<ul>
<li>Side One</li>
<ul>
<li>Pac-Man Fever</li>
<li>Froggy's Lament</</li>
<li>Ode to a Centipede</</li>
<li>Do the Donkey Kong</</li>
</ul>
<li>Side Two</li>
<ul>
<li>Hyperspace</</li>
<li>The Defender</</li>
<li>Mousetrap</</li>
<li>Goin' Berzerk</</li>
</ul>
</ul>

Rather than the typical display, I'd like to display sides one and two
side by side, like this:

Side One Side Two
Pac-Man Fever Hyperspace
Froggy's Lament The Defender
Ode to a Centipede Mousetrap
Do the Donkey Kong Goin'Berzerk

I created a quick example that seems to be roughly doing what you want,
tested in Mozilla1.3, Opera7.03 and IE6:

<http://gutfeldt.ch/matthias/test/lists-side-by-side.html>

I'm sure there are many improvements and tweaks possible to make it work
in a wide range of browsers.
By the way, your list markup is not correct. Remember that you're trying
to *nest* the lists: The second list is part of a list element of the
first list:

<ul>
<li>First list element</li>
<li>Second list element
<ul><li>Nested list is part of second list element</li></ul>
</li>
</ul>

Nested lists are difficult to handle, I keep getting it wrong all the
time, so it's best to validate the HTML before you try to style it.
Matthias

Jul 20 '05 #3

Stan Brown

It seems "" wrote in comp.infosystems.www.authoring.stylesheets:

I have a set of nested lists: <ul>
<li>Side One</li>
<ul>
<li>Do the Donkey Kong</</li>
</ul>
<li>Side Two</li>
There's your problem. A list cannot be directly inside another list;
only a list _item_ can be directly within a list. So your inner list
must be part of an _item_ of the outer list, like this:
<ul>
<li>Side One
<ul>
<li>Do the Donkey Kong</</li>
</ul>
</li>
<li>Side Two</li>

I show stuff on separate lines for clarity, but of course those tags
can be right next to each other.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Jul 20 '05 #4

Lee K. Seitz

In article <bv************@ID-16734.news.uni-berlin.de>,
Matthias Gutfeldt <sa************@gmx.net> wrote:

Lee K. Seitz wrote:

I have a set of nested lists: Rather than the typical display, I'd like to display sides one and two
side by side, like this:

Side One Side Two
Pac-Man Fever Hyperspace
Froggy's Lament The Defender
Ode to a Centipede Mousetrap
Do the Donkey Kong Goin'Berzerk

I created a quick example that seems to be roughly doing what you want,
tested in Mozilla1.3, Opera7.03 and IE6:

<http://gutfeldt.ch/matthias/test/lists-side-by-side.html>

Interestingly, it doesn't work in Opera 7.23, which I downloaded last
night. Is this a beta version? It didn't say so (that I saw).
Still, most of my users seem to use IE, so I won't lose sleep over it.
By the way, your list markup is not correct. Remember that you're trying
to *nest* the lists: The second list is part of a list element of the
first list:

<ul>
<li>First list element</li>
<li>Second list element
<ul><li>Nested list is part of second list element</li></ul>
</li>
</ul>

Nested lists are difficult to handle, I keep getting it wrong all the
time, so it's best to validate the HTML before you try to style it.

D'oh! I forgot to validate it before posting. Sorry, I just was
getting frustrated and didn't think about it.

Thanks for the tip. In Internet terms, I'm an old fogie. I've been
doing HTML since version 1.0 and am not used to having to close my
list elements. (I'm trying to use XHTML, too, as I redo this set of
pages.) I'm going to get used to it, though!

(BTW, Neal, if you're reading this, thanks for your response, too.)

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
'70s flashback: It takes two hands to handle a Whopper.

Jul 20 '05 #5