nested lists

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

steven - 26 Jul 2005 19:45 GMT

Hi,
I want to make nested lists like

<ul id="nested">
<li>level1 item</li>
<ul>
<li>level2 item</li>
<li>level2 item</li>
</ul>
<li>level1 item</li>
<ul>
<li>level2 item</li>
<ul>
<li>level3 item</li>
</ul>
</ul>
</ul>

etc.
I thought the CSS was gonna be easy, but I don't get really what I want.
After some experimenting I only got level1 and level2 correct:

#nested li { ...level1 styling... }
#nested ul li { ...level2 styling... }

I somehow can't get the lower levels right. Stupid of me, I know... :-(

Steven

Reply to this Message

Barbara de Zoete - 26 Jul 2005 19:57 GMT

> Hi,
> I want to make nested lists like
[quoted text clipped - 3 lines]
> <ul>
> <li>level2 item</li>

That's not a nested list:

<ul id="nested">
<li>level1 item
<ul>
<li>level2 item</li>
<li>level2 item2</li>
</ul>
</li>
<li>level1 item2</li>
</ul>

is.

So, correct your markup and try again. Nothing a proper check with some
validator wouldn't have told you, BTW.

Signature

,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.

`-------------------------------------------------- --<--@ ------------'

Reply to this Message

steven - 26 Jul 2005 20:11 GMT

> > Hi,
> > I want to make nested lists like
[quoted text clipped - 20 lines]
> So, correct your markup and try again. Nothing a proper check with some
> validator wouldn't have told you, BTW.

Do'h! I knew it!!
Dank je wel, Barbara

Steven

Reply to this Message

Barbara de Zoete - 26 Jul 2005 20:15 GMT

>> On Tue, 26 Jul 2005 18:45:43 GMT, steven <steven_somenumber@telenet.be>
> wrote:
[quoted text clipped - 3 lines]
>> >
> Dank je wel, Barbara

Welcome. Geen dank.

What also helps is to start out creating your style selectors with the li only.
So:

li { /*properties for level 1*/ }
li li { /*properties for level 2*/ }
li li li { /*properties for level 3*/ }

Keeps the sheet clean and relatively simple to maintain.

Signature

,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.

`-------------------------------------------------- --<--@ ------------'

Reply to this Message

Lars Eighner - 26 Jul 2005 20:57 GMT

In our last episode,
<rxvFe.154199$N25.8324221@phobos.telenet-ops.be>,
the lovely and talented steven
broadcast on comp.infosystems.www.authoring.stylesheets:

> Hi,
> I want to make nested lists like

><ul id="nested">
> <li>level1 item</li>
[quoted text clipped - 10 lines]
> </ul>
></ul>

> etc.

This is not the way to nest lists. Don't close level1 item with
</li> until after the </ul> of the sub list.

<ul id="nested">
<li>level1 item
<ul>
<li>level2 item</li>
<li>level2 item</li>
</ul></li>
&c.

> I thought the CSS was gonna be easy, but I don't get really what I want.
> After some experimenting I only got level1 and level2 correct:

> #nested li { ...level1 styling... }
> #nested ul li { ...level2 styling... }

> I somehow can't get the lower levels right. Stupid of me, I know... :-(

Signature

Lars Eighner eighner@io.com http://www.larseighner.com/
I don't see posts from or threads started from googlegroups.
WWJD: What Would Jenna Drink?

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2005

nested lists