<UL> styling question

Hi,
How can I set up the styling for different levels of <UL> to use
different images for bullets, be indenetd differently, ...

Like:

.. list 1
- item 1
- item 2
.. list 2
-item 1
- item 2

Thanks.

ashkaan57 (AT) hotmail (DOT) com writes:

Hi,
How can I set up the styling for different levels of <UL> to use
different images for bullets, be indenetd differently, ...

Like:

. list 1
- item 1
- item 2
. list 2
-item 1
- item 2

You could use a "nested" selector:

UL LI UL {
...
}

This will style ULs that appear inside of LIs that appear inside of ULs.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

ashkaan57 (AT) hotmail (DOT) com wrote:

Hi,
How can I set up the styling for different levels of <UL> to use
different images for bullets, be indenetd differently, ...

Like:

. list 1
- item 1
- item 2
. list 2
-item 1
- item 2

ul{
list-style-image: url(image1.gif);
}
ul ul{
list-style-image: url(image2.gif);
}
ul ul ul{
list-style-image: url(image3.gif);
}
ul ul ul ul{
list-style-image: url(image4.gif);
}

(Yes, the spaces should actually be >'s, but last time I checked, MSIE
didn't support them.)

Grtz,
--
Rik Wasmus

On 14 Aug 2006 13:32:23 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Hi,
How can I set up the styling for different levels of <UL> to use
different images for bullets, be indenetd differently, ...

Like:

. list 1
- item 1
- item 2
. list 2
-item 1
- item 2

Thanks.

Use classes.
<ul class="somemeaningfulname">
and
<ul class="someothermeaningfulname">

style <li> padding and list item within
..somemeaningfulname li
and
..someothermeaningfulname li

You can also use ID, or parent tag.

--
buy, bought, bye

Nije Nego wrote:

On 14 Aug 2006 13:32:23 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

Hi,
How can I set up the styling for different levels of <UL> to use
different images for bullets, be indenetd differently, ...

Like:

. list 1
- item 1
- item 2
. list 2
-item 1
- item 2

Thanks.

Use classes.
ul class="somemeaningfulname"
and
ul class="someothermeaningfulname"

style <li> padding and list item within
.somemeaningfulname li
and
.someothermeaningfulname li

You can also use ID, or parent tag.

--
buy, bought, bye

Thanks a lot for the help.
I used:
..lists {
margin:2em 0 0 2em;
}

..lists ul {
margin:0;
padding:0;
}

..lists li {
padding: 0 0 0.5em 1em;
list-style: url(../images/19dot1a.gif) circle outside;
}
..lists2 {
margin:0.5em 0 0 2em;
}

..lists2 ul {
margin:0;
padding:0;
}

..lists2 li {
padding: 0 0 0.5em 2em;
list-style: url(../images/2dot6a.gif) circle outside;
}

and in html:
<ul class="lists">
<li>li-level1-1</li>
<ul class="lists2">
<li>li-level2-1</li>
<li>li-level2-2</li>
<li>li-level2-3</li>
</ul>
<li>li-level1-2</li>
<ul class="lists2">
<li>li-level2-4</li>
<li>li-level2-5</li>
</ul>
</ul>

but they all line up under each other, with different bullet images.

ashkaan57 (AT) hotmail (DOT) com schrieb:

ul class="lists"
li>li-level1-1</li
ul class="lists2"
li>li-level2-1</li
li>li-level2-2</li
li>li-level2-3</li
/ul
li>li-level1-2</li
ul class="lists2"
li>li-level2-4</li
li>li-level2-5</li
/ul
/ul

You have to correct your HTML code: the nested ul elements must be
children of the li elements. Then you can use the "nested" approach and
don't need classes.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

On 14 Aug 2006 17:59:55 -0700, ashkaan57 (AT) hotmail (DOT) com wrote:

but they all line up under each other, with different bullet images.

I am not sure what do you want to achieve, if you want U list in list
(nested), than you should code html like it follows:
<ul>
<li> nested list
<ul>
<li>li-level2-1</li>
<li>li-level2-2</li>
<li>li-level2-3</li>
</ul>
</li>
</ul>

This is a normal unordered list.
<ul>
<li>li-level2-4</li>
<li>li-level2-5</li>
</ul>

No css needed. List are styled diferently.
--
buy, bought, bye