Stylesheets - <UL> styling question

Author

<UL> styling question

ashkaan57@hotmail.com

2006-08-14, 6:47 pm

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.

Sherm Pendley

2006-08-14, 6:47 pm

ashkaan57@hotmail.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

Rik

2006-08-14, 6:47 pm

ashkaan57@hotmail.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

Nije Nego

2006-08-14, 6:47 pm

On 14 Aug 2006 13:32:23 -0700, ashkaan57@hotmail.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

ashkaan57@hotmail.com

2006-08-14, 10:42 pm

Nije Nego wrote:
> On 14 Aug 2006 13:32:23 -0700, ashkaan57@hotmail.com wrote:
>
>
> 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.

Johannes Koch

2006-08-15, 6:45 am

ashkaan57@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

2006-08-15, 10:35 pm

On 14 Aug 2006 17:59:55 -0700, ashkaan57@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>
<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