How to format outline indentation with CSS?

[deko]

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.

[Johannes Koch]

deko wrote:

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.

Looks more like a nested ordered list (ol). Use the CSS list-style-type
property (upper-roman, upper-alpha, decimal).
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)

[Chris Morris]

"deko" <de**@nospam.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

[deko]

> 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?

[Chris Morris]

"deko" <de**@nospam.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

[deko]

>> 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...

[deko]

> 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; }

[deko]

#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

[Chris Morris]

"deko" <de**@nospam.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

[deko]

> 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]

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...

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

#sidebar
{
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}

#sidebar a { text-decoration:none; color:#333; }
#sidebar a:link { text-decoration:none; color:#333; }
#sidebar a:visited { text-decoration:none; color:#333; }
#sidebar a:active { text-decoration:none; color:#333; }
#sidebar a:hover { text-decoration:underline; color:#333; }

#sidebar ol {
padding-left:15px;
text-indent:-13px;
list-style:none;
font-weight:bold;
margin-top:0;
margin-bottom:0;
}

#sidebar li {
padding-left:15px;
text-indent:-15px;
list-style:none;
font-weight:normal;
margin-top:0;
margin-bottom:0;
}
HTML

<div id="sidebar">
<p>OUTLINE</p>
<ol>
I. <a href="http://www.postpositive.org/wp03/?p=3"
target="_self">Dispensationalism: A Return to Biblical Theology or Pseudo
Christian Cult?</a>
<li>A. Why Argue about Doctrine?
<li>B. What is Dispensationalism?
<li>C. Is Dispensational Premillennialism Different from Historic
Premillennialism?
<li>D. How Does Dispensationalism Deny the Gospel?
<li>E. The Scofield Problem
<li>F. The Chafer Problem
<li>G. The Kingdom Offer
<li>H. The Dispensational Distinction Between Israel and the Church
<li>I. How the Pretribulational Rapture Denies the Gospel
<li>J. Hyper Dispensationalism
<li>K. Questions for Dispensationalists
<li>L. Footnotes
</ol>
<ol>II.
<li>A.
<li>B.
</ol>
</div>

[Chris Morris]

"deko" <de**@nospam.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

[Gérard Talbot]

deko wrote :

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

List-style-position does exactly what you are looking for:
http://www.w3.org/TR/CSS21/generate....style-position

Gérard
--
remove blah to email me

[deko]

> List-style-position does exactly what you are looking for:

http://www.w3.org/TR/CSS21/generate....style-position

list-style-position is the way to go - it justifies better than text-indent. I
was able to refactor the stylesheet pretty well but had to use a div for the
Main headings and some &#160's as needed. I'm sure there's a way to do it with
only CSS, but I couldn't figure it out.

Here's how it looks:

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

Here's the css:

#sidebar
{
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}

#sidebar form {
margin: 0;
}

#sidebar .outline-main {
margin-bottom:0;
text-indent:-15px;
padding-left:5px;
}

#sidebar ol {
list-style-position:outside;
padding-left:15px;
margin-left:0;
margin-top:0;
margin-bottom:0;
}

#sidebar li {
list-style-type:upper-alpha;
}
Here's the HTML:

<div id="sidebar">
<p>OUTLINE</p>
<div class="outline-main">
1.<a href="http://www.postpositive.org/wp03/?p=3" target="_self">
Dispensationalism: A Return to Biblical Theology or Pseudo Christian Cult?</a>
</div>
<ol>
<li>Why Argue about Doctrine?</li>
<li>What is Dispensationalism?</li>
<li>Is Dispensational Premillennialism Different from Historic
Premillennialism?</li>
<li>How Does Dispensationalism Deny the Gospel?</li>
<li>The Scofield Problem</li>
<li>The Chafer Problem</li>
<li>The Kingdom Offer</li>
<li>The Dispensational Distinction Between Israel and the Church</li>
<li>How the Pretribulational Rapture Denies the Gospel</li>
<li>Hyper Dispensationalism</li>
<li>Questions for Dispensationalists</li>
<li>Footnotes</li>
</ol>
<p>    <a
href="http://www.postpositive.org/wp03/?p=3#comments"
target="_self">Comments</a></p>
<div class="outline-main">
2.<a href="http://www.postpositive.org/wp03/?p=3" target="_self"> Main point
two</a>
</div>
<ol>
<li>Sub point A</li>
<li>Sub point B</li>
</ol>
</div>