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

How to format outline indentation with CSS?

P: n/a

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.

May 13 '06 #1
Share this Question
Share on Google+
13 Replies


P: n/a
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)
May 13 '06 #2

P: n/a
"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
May 13 '06 #3

P: n/a
> 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?
May 13 '06 #4

P: n/a
"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
May 13 '06 #5

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

May 13 '06 #6

P: n/a
> 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; }
May 13 '06 #7

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

May 13 '06 #8

P: n/a
"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
May 13 '06 #9

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

May 13 '06 #10

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

May 13 '06 #11

P: n/a
"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
May 13 '06 #12

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

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

This discussion thread is closed

Replies have been disabled for this discussion.