<UL> styling question

[ashkaan57]

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

Like:

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

Thanks.

[Sherm Pendley]

as*******@hotmail.com writes:

Hi,
How can I set up the styling for different levels of <ULto 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

[Rik]

as*******@hotmail.com wrote:

Hi,
How can I set up the styling for different levels of <ULto 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

[Nije Nego]

On 14 Aug 2006 13:32:23 -0700, as*******@hotmail.com wrote:

Hi,
How can I set up the styling for different levels of <ULto 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 <lipadding and list item within
..somemeaningfulname li
and
..someothermeaningfulname li

You can also use ID, or parent tag.

--
buy, bought, bye

[ashkaan57]

Nije Nego wrote:

On 14 Aug 2006 13:32:23 -0700, as*******@hotmail.com wrote:

Hi,
How can I set up the styling for different levels of <ULto 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 <lipadding 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.

[Johannes Koch]

as*******@hotmail.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.)

[Nije Nego]

On 14 Aug 2006 17:59:55 -0700, as*******@hotmail.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>
<linested 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