CSS controlled multi-level list

[AV]

Hi,

I have an external stylesheet which has multiple DIVs defined for different
sections of my site. Each div has ul and li defined with image bullets. I
would like to make a simple, 2-level list (not dynamic) that has a second
level indented below the first that uses a different image bullet.

Is there a way to define more than one li for a div with different margins
and bullet styles? And if so, how do I call it within the HTML? I don't
know how to code it. Here's an abbreviated version of 2 div in the
stylesheet:

div.navpro ul {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
padding: 0;
}
div.navpro li {
margin: 0;
padding: 1px;
list-style-image:url('../images/arrow1_blue);
}

div.navcon ul {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
padding: 0;
}
div.navpro li {
margin: 0;
padding: 1px;
list-style-image:url('../images/arrow1_red);
}

Each of these DIVs has additional formatting that I did not include here.
The goal is to have a second level li for each div with different pading and
list-style-images.

Thanks for your help!

 

[Jens Peter Karlsen[FP-MVP]]

You will need to create a class for each of these and apply it to the
second level li.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: AV [mailto:[email protected]]
Posted At: 3. august 2005 01:24
Posted To: microsoft.public.frontpage.client
Conversation: CSS controlled multi-level list
Subject: CSS controlled multi-level list


Hi,

I have an external stylesheet which has multiple DIVs defined for
different sections of my site. Each div has ul and li defined with
image bullets. I would like to make a simple, 2-level list (not
dynamic) that has a second level indented below the first that uses a
different image bullet.

Is there a way to define more than one li for a div with different
margins and bullet styles? And if so, how do I call it within the HTML?
I don't know how to code it. Here's an abbreviated version of 2 div in
the
stylesheet:

div.navpro ul {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
padding: 0;
}
div.navpro li {
margin: 0;
padding: 1px;
list-style-image:url('../images/arrow1_blue);
}

div.navcon ul {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
padding: 0;
}
div.navpro li {
margin: 0;
padding: 1px;
list-style-image:url('../images/arrow1_red);
}

Each of these DIVs has additional formatting that I did not include
here.
The goal is to have a second level li for each div with different pading
and list-style-images.

Thanks for your help!

 

[Stefan B Rusynko]

Add the second level list styles as li li

div.navpro li { margin: 0; padding: 1px;
list-style-image:url('../images/arrow1_blue); }

div.navpro li li { margin: 0; padding: 1px;
list-style-image:url('../images/arrow2_red); }





| Hi,
|
| I have an external stylesheet which has multiple DIVs defined for different
| sections of my site. Each div has ul and li defined with image bullets. I
| would like to make a simple, 2-level list (not dynamic) that has a second
| level indented below the first that uses a different image bullet.
|
| Is there a way to define more than one li for a div with different margins
| and bullet styles? And if so, how do I call it within the HTML? I don't
| know how to code it. Here's an abbreviated version of 2 div in the
| stylesheet:
|
| div.navpro ul {
| margin-top: 0;
| margin-bottom: 0;
| margin-left: 30px;
| padding: 0;
| }
| div.navpro li {
| margin: 0;
| padding: 1px;
| list-style-image:url('../images/arrow1_blue);
| }
|
| div.navcon ul {
| margin-top: 0;
| margin-bottom: 0;
| margin-left: 30px;
| padding: 0;
| }
| div.navpro li {
| margin: 0;
| padding: 1px;
| list-style-image:url('../images/arrow1_red);
| }
|
| Each of these DIVs has additional formatting that I did not include here.
| The goal is to have a second level li for each div with different pading and
| list-style-images.
|
| Thanks for your help!