Multi-level ordered list
Don84
ordered list. In other words, the ability to create multi-level
structures such as
1. Products
1.1 Pen
1.2 Computer
1.n Food
2. Users
2.1 Generic consumers
2.2 College students
2.n ...
3 Comments
...
Browsers: IE7? IE8? Firefox 3.5?
I've tried to even create the second level manually, e.g.
1.1, bla bla,
1.2 more bla bla.
Had some success with Firefox 3.5 but completely out of
luck with IE7, tried Firefox again but failed. The web page
uses frame with execCommand of InsertOrderList. It must not be manual
coding.
Thanks.
Evertjan.
Must?? Why, this a school exercise?
Manual coding?? Do you have a virtual programmer?
Using Javascript there are many possibilities, even without <li>:
=====================================
<script type='text/javascript'>
var l1,l2;
function level1(s) {
document.write('<br>'+ ++l1 +'. '+s);
l2 = 0;
};
function level2(s) {
document.write('<br> '+ l1 + '.' + ++l2 +'.
'+s);
};
</script>
<body>
<script type='text/javascript'>
l1=0;
level1('Products');
level2('Pen');
level2('Computer');
level2('Food');
level1('Users');
level2('Generic consumers');
level2('College students');
level2('...');
level1('Comments');
</script>
=================================
Serverside coding is also an option.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
dorayme
<2d8aeed8-5abe-442b...@a32g2000yqm.googlegroups.com>,
Don84 <tatat...@gmail.com> wrote:
> I'm wondering if there's a way to support ordered list inside an
> ordered list. In other words, the ability to create multi-level
> structures such as
> 1. Products
> 1.1 Pen
> 1.2 Computer
> 1.n Food
>
> 2. Users
> 2.1 Generic consumers
> 2.2 College students
> 2.n ...
Change ul to ol:
<http://dorayme.netweaver.com.au/lists/list_in_list.html>
And then there is the urgent question (not so urgent with mere ul) of
some styling. Have a go and come back if you have problems.
--
dorayme
Jonathan N. Little
> I'm wondering if there's a way to support ordered list inside an
> ordered list. In other words, the ability to create multi-level
> structures such as
> 1. Products
> 1.1 Pen
> 1.2 Computer
> 1.n Food
>
> 2. Users
> 2.1 Generic consumers
> 2.2 College students
> 2.n ...
>
> 3 Comments
> ...
>
Counters
http://www.w3.org/TR/CSS2/generate.html#counters
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>With Counters</title>
<style type="text/css">
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
</style>
</head>
<body>
<ol>
<li>Products
<ol>
<li>Pen</li>
<li>Computer</li>
<li>Food</li>
</ol>
</li>
<li>Users
<ol>
<li>Generic consumers</li>
<li>College students</li>
<li>...</li>
</ol>
</li>
<li>Comments</li>
</ol>
</body>
</html>
> Browsers: IE7?
Nope, nor IE6, 5 ... but will degrade to just single numbers
> IE8?
Yup.
> Firefox 3.5?
Yup, and SeaMonkey, Chrome, Opera, ...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Don84
Sorry, I think, probably you missed this part, "The web page
uses frame with execCommand of InsertOrderList. ", that is, the top
level OL element is dynamically inserted with the execCommand of
InsertOrderList via a function button, attempt to repeat it after an
element insertion for the second level OL with Firefox 3.5 failed.
I'll try it with IE8 soon...
Stan Brown
<exjxw.ha...@interxnl.net>:
> Using Javascript there are many possibilities, even without <li>:
I thought this was a CSS newsgroup.
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
Jonathan N. Little
> Sorry, I think, probably you missed this part, "The web page
> uses frame
Ugh, frame? Stylesheet would have to be linked to the frame's document,
not the parent.
> with execCommand of InsertOrderList. ",
Off topic, this is a stylesheet newsgroup, you want a JavaScript group.
Evertjan.
comp.infosystems.www.authoring.stylesheets:
> 21 Nov 2009 18:48:01 GMT from Evertjan.
> <exjxw.ha...@interxnl.net>:
>> Using Javascript there are many possibilities, even without <li>:
>
> I thought this was a CSS newsgroup.
That is true, but why try to do something with CSS, that clearly cannot be
done crossbrowser reliably, that can be done with scripting with such ease?
<li> it self is a pain in the neck, as long as you cannot place a floating
block on the left of it with any crossbrowser reliably.
Jonathan N. Little
> Stan Brown wrote on 22 nov 2009 in
> comp.infosystems.www.authoring.stylesheets:
>
>> 21 Nov 2009 18:48:01 GMT from Evertjan.
>> <exjxw.ha...@interxnl.net>:
>>> Using Javascript there are many possibilities, even without<li>:
>>
>> I thought this was a CSS newsgroup.
>
> That is true, but why try to do something with CSS, that clearly cannot be
> done crossbrowser reliably, that can be done with scripting with such ease?
Only IE was the problem recently and now with IE8 you can use counters.
Either way is does degrade gracfully.
>
> <li> it self is a pain in the neck, as long as you cannot place a floating
> block on the left of it with any crossbrowser reliably.
>
What are you talking about?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Floats and Lists</title>
<style type="text/css">
div.afloat { background: #ffc; float: left; width: 5em; height: 20em;
margin-right: 2em; padding: .5em; }
</style>
</head>
<body>
<div class="afloat">A block of text floated to the left, dimensioned to
give it some size</div>
<ul>
<li>An</li>
<li>Unordered</li>
<li>List</li>
<li>Not</li>
<li>Floated</li>
</ul>
</body>
</html>
Now browsers have different defaults for margins and padding on UL, OL,
and LI elements that can effect your results, but that can be easily
solved by just defining those properties in your stylesheet.