By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,760 Members | 1,585 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,760 IT Pros & Developers. It's quick & easy.

<UL> styling question

P: n/a
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.

Aug 14 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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
Aug 14 '06 #2

P: n/a
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
Aug 14 '06 #3

P: n/a
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
Aug 14 '06 #4

P: n/a

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.

Aug 15 '06 #5

P: n/a
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.)
Aug 15 '06 #6

P: n/a
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
Aug 15 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.