How to format outline indentation with CSS?

I.
A.
B.
II.
A.
1)
2)
B.
C.

etc.
etc.

The problem with <dl> is that I cannot control the amount of indentation, which
effectively makes this useless 80% of the time.

Is there a way to control outline indentation with CSS?

Can anyone point me to an example?

Thanks in advance.

"deko" <deko (AT) nospam (DOT) com> writes:

II.
A.
1)

Is there a way to control outline indentation with CSS?

<ol>
(...)
<li>
<ol>
<li>
<ol>
<li>(...)</li>
(...)
</ol>
</li>
(...)
</ol>
</li>
(...)
</ol>

Play around with the margin: and padding: properties on ol and li and
you get the indentation.
ol { list-style-type: XXX; }
ol ol { list-style-type: YYY; }
(...)

Depending on where the balance between presentation and content in the
numbering lies, you might use <ul> and list-style-type: none; and put
the numbers in the <li> element content, rather than <ol>.

--
Chris

Looks more like a nested ordered list (ol). Use the CSS list-style-type
property (upper-roman, upper-alpha, decimal).

I'm not sure what the "CSS list-style-type property" is.

I'll do some research.

One thing that's problematic with outlining is controlling the margin and line
wrap of subordinate points.

For example:

I. First Main Point Goes Here
And Should Wrap Like This
A. Subordinate Point Goes Here
And should Wrap Like This
B. Another Sub Point
II. Second Main Point
A.
B.

So the challenge is not only controlling indentation, but also where the text
wraps.

I'm wondering if something like this would work:

..main {
margin-left: 5px
}

..sub1 {
margin-left: 10px
}

..sub2 {
margin-left: 15px
}

That might address the indentation issue, but how to control word wrap?

"deko" <deko (AT) nospam (DOT) com> writes:

I'm not sure what the "CSS list-style-type property" is.

I'll do some research.

http://www.w3.org/TR/CSS2/ is the CSS specification.

So the challenge is not only controlling indentation, but also where
the text wraps.

Look up text-indent (hint: it can have a negative value) while you're
reading the spec.

--
Chris

I'm not sure what the "CSS list-style-type property" is.

I'll do some research.

http://www.w3.org/TR/CSS2/ is the CSS specification.

So the challenge is not only controlling indentation, but also where
the text wraps.

Look up text-indent (hint: it can have a negative value) while you're
reading the spec.

That text-indent property with a negative value is half the battle. Thanks.
But I'm not if the ordered list will auto-generate the Roman Numerals and
upper/lower case letters - it does not appear so...

Play around with the margin: and padding: properties on ol and li and
you get the indentation.
ol { list-style-type: XXX; }
ol ol { list-style-type: YYY; }
(...)

Depending on where the balance between presentation and content in the
numbering lies, you might use <ul> and list-style-type: none; and put
the numbers in the <li> element content, rather than <ol>.

still playing around with this... am I on the right track?

#sidebar {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-indent:-13px;
}

#sidebar ol.1i { list-style:upper-roman outside; }
#sidebar ol.2a { list-style:upper-alpha outside; }
#sidebar ol.31 { list-style:decimal outside; }
#sidebar ol.4a { list-style:lower-alpha outside; }
#sidebar ol.5i { list-style:lower-roman outside; }

#sidebar ol.1I { list-style:upper-roman outside; text-indent:-13px;
padding-left:5px }
#sidebar ol.2A { list-style:upper-alpha outside; }
#sidebar ol.31 { list-style:decimal outside; }
#sidebar ol.4a { list-style:lower-alpha outside; }
#sidebar ol.5i { list-style:lower-roman outside; }

closer, but the Roman Numerals and letters do not auto-generate

"deko" <deko (AT) nospam (DOT) com> writes:

#sidebar ol.1I { list-style:upper-roman outside; text-indent:-13px;
padding-left:5px }
#sidebar ol.2A { list-style:upper-alpha outside; }
#sidebar ol.31 { list-style:decimal outside; }
#sidebar ol.4a { list-style:lower-alpha outside; }
#sidebar ol.5i { list-style:lower-roman outside; }

closer, but the Roman Numerals and letters do not auto-generate

Can you put an example page up somewhere? However, I'd guess that the
problem here is that class names can't start with a digit (see section
4.1.3 of the specification).

You could rename the classes, but probably better is to do
#sidebar ol /* was .1I */ {...}
#sidebar ol ol /* was .2A */ {...}
#sidebar ol ol ol /* was .31 */ {...}
and so on, rather than using classes (which bloats the HTML and leaves
room for errors labelling them).

--
Chris

Can you put an example page up somewhere? However, I'd guess that the
problem here is that class names can't start with a digit (see section
4.1.3 of the specification).

You could rename the classes, but probably better is to do
#sidebar ol /* was .1I */ {...}
#sidebar ol ol /* was .2A */ {...}
#sidebar ol ol ol /* was .31 */ {...}
and so on, rather than using classes (which bloats the HTML and leaves
room for errors labelling them).

Yes, I will have an example shortly... thanks for the help... I've been trying
different things....

"deko" <deko (AT) nospam (DOT) com> writes:

http://www.postpositive.org/wp03/index.php

This is not bad... but I wish I could figure out how to auto-generate
the letters. Also not sure how to handle subpoints under letters, and
sub points under subpoints...

See the ol ol styles in my earlier post. If you structure the lists
right it'll be fine.

How do I use <li> <li> and <ol> <ol> ??

<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Sub Item A</li>
<li>Sub Item B</li>
</ol>
</li>
<li>Item 3</li>
</ol>

Only <li>s directly inside an <ol>, and the sub-lists' <ol>s go inside
the <li>s.

--
Chris