Stylesheets - Indenting information under heading elements

Author

Indenting information under heading elements

Chris Reigrut

2004-02-26, 11:29 pm

I have a bunch of (old) pages that are outline-driven, and use the h1-h6
elements to define headings. Is there any way that I can create a stylesheet to
show them in an indented style? For instance, my HTML is:

<html>
<body>
<h1>Title Page</h1>
Some content, perhaps the intro.

<h2>Section 1</h2>
Stuff about section 1.

<h2>Section 2</h2>
An overview of section 2.

<h3>Section 2a</h2>
A subsection within section 2.

<h3>Section 2b</h2>
Another subsection within section 2.

<h2>Section 3</h2>
The closing section.
</body>
</html>

and I'd like it to render as

Title Page (really big bold font)
Some content, perhaps the intro.

Section 1 (big bold font)
Stuff about section 1.

Section 2 (big bold font)
An overview of section 2.

Section 2a (big italic font)
A subsection within section 2.

Section 2b (big italic font)
Another subsection within section 2.

Section 3 (big bold font)
The closing section.

I've tried a bunch of options, but to no avail. I've even made some attempts
creating div elements underneath each heading, but a) I haven't gotten it to
work correctly, either, and b) having to change all of my pages would really
suck. Any thoughts would be greatly appreciated!

Chet

2004-02-27, 2:28 am

"Chris Reigrut" <chris@teravation.com> wrote in message
news:103temfamq24o83@corp.supernews.com...
> I have a bunch of (old) pages that are outline-driven, and use
the h1-h6
> elements to define headings. Is there any way that I can
create a stylesheet to
> show them in an indented style? For instance, my HTML is:
>
> <html>
> <body>
> <h1>Title Page</h1>
> Some content, perhaps the intro.
>
> <h2>Section 1</h2>
> Stuff about section 1.
>
> <h2>Section 2</h2>
> An overview of section 2.
>
> <h3>Section 2a</h2>
> A subsection within section 2.
>
> <h3>Section 2b</h2>
> Another subsection within section 2.
>
> <h2>Section 3</h2>
> The closing section.
> </body>
> </html>
>
> and I'd like it to render as
>
> Title Page (really big bold font)
> Some content, perhaps the intro.
>
> Section 1 (big bold font)
> Stuff about section 1.
>
> Section 2 (big bold font)
> An overview of section 2.
>
> Section 2a (big italic font)
> A subsection within section 2.
>
> Section 2b (big italic font)
> Another subsection within section 2.
>
> Section 3 (big bold font)
> The closing section.
>
> I've tried a bunch of options, but to no avail. I've even made
some attempts
> creating div elements underneath each heading, but a) I haven't
gotten it to
> work correctly, either, and b) having to change all of my pages
would really
> suck. Any thoughts would be greatly appreciated!

If your use of h1-h6 is consistent, you can define each the
style/indent desired, something like

h1 {font:bold 200% arial,sans-serif;}
h2 {font:bold italic 180% arial,sans-serif;text-indent:15px;}
h3 {font:bold italic 160% arial,sans-serif;text-indent:30px;}
h4 {font:bold 140% arial,sans-serif;text-indent:45px;}
h5 {font:bold 120% arial,sans-serif;text-indent:60px;}
h6 {font: 100% arial,sans-serif;text-indent:75px;}

However, this will affect all h1-6's in the site unless you
assign a class to separate your outline from the remainder of the
page/site.

hth
--
Chet
ng2.chet@NOcharterSPAM.net (remove NO.....SPAM)

kchayka

2004-02-27, 7:28 am

Chris Reigrut wrote:
> I have a bunch of (old) pages that are outline-driven, and use the h1-h6
> elements to define headings. Is there any way that I can create a stylesheet to
> show them in an indented style?

What you describe is a nested list. Use the right markup for the job.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Harlan Messinger

2004-02-27, 8:29 am

kchayka <usenet@c-net.us> wrote:

>Chris Reigrut wrote:
>
>What you describe is a nested list. Use the right markup for the job.

What the OP described looks like every document that has headings at
multiple levels and content under each. The only difference is that he
wants the levels to be indented, outline style. Surely this one,
purely presentational, detail can't determine the markup that he
should use.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jukka K. Korpela

2004-02-27, 10:29 am

Chris Reigrut <chris@teravation.com> wrote:

> - - and I'd like it to render as
>
> Title Page (really big bold font)
> Some content, perhaps the intro.
>
> Section 1 (big bold font)
> Stuff about section 1.

If the stuff has no systematic markup (maybe it even has "loose" text,
i.e. text not wrapped into any block level container?), then it seems
hopeless without modifying the markup. With modified markup, it should
be rather simple.

> I've tried a bunch of options, but to no avail. I've even made
> some attempts creating div elements underneath each heading, but a)
> I haven't gotten it to work correctly, either,

Exactly what did you try? URL?

If you just use

<div class="s">
<h2>...</h2>
stuff
<div class="s">
<h3>...</h3>
stuff
</div>
<div class="s">
<h3>...</h3>
stuff
</div>
</div>
<div class="s">
<h2>...</h2>
...

i.e. put each logical section, subsection, etc. (making the heading
part of a section) into a <div> element, then you could simply say

div.s { margin-left: 2em; }

or whatever indentation you like.

> and b) having to
> change all of my pages would really suck.

I don't think there's much you can do except hand-edit the pages,
unless you dare to try some automated processing that creates the <div>
markup on the basis of heading elements.

Too bad HTML was not born with <section> markup.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Chris Reigrut

2004-02-29, 4:29 pm

Well, I finally managed to get it to work...thanks to everyone who responded
with hints! My solution required me to modify my pages as follows:

<html>
<body>
<h1>Title Page</h1>
<div class="hcontent">
Some content, perhaps the intro.

<h2>Section 1</h2>
<div class="hcontent">
Stuff about section 1.
</div>

<h2>Section 2</h2>
<div class="hcontent">
An overview of section 2.

<h3>Section 2a</h2>
<div class="hcontent">
A subsection within section 2.
</div>

<h3>Section 2b</h2>
<div class="hcontent">
Another subsection within section 2.
</div>
</div>

<h2>Section 3</h2>
<div class="hcontent">
The closing section.
</div>
</div>
</body>
</html>

with a stylesheet of:

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.17em;
margin-left: 15px;
}

h3 {
margin-left: 30px;
}

h1 + .hcontent {
}

h2 + .hcontent {
margin-left: 15px;
}

h3 + .hcontent {
margin-left: 30px;
}

I had hoped to get away with a single "houtline" class (to replace all of the
headers) and a single "hcontent" class, but this was the best I could do. And
without any ability to set a variable or calculate a value, I couldn't see
another solution. It would have been nice to be able to declare something like
h1 h2 h3 {
margin-left: @current(margin-left) + 15px;
}

Again, thanks for the help! If anyone has a better solution, I'd love to hear
about it!

Chris Reigrut wrote:
> I have a bunch of (old) pages that are outline-driven, and use the h1-h6
> elements to define headings. Is there any way that I can create a
> stylesheet to
> show them in an indented style? For instance, my HTML is:
>
> <html>
> <body>
> <h1>Title Page</h1>
> Some content, perhaps the intro.
>
> <h2>Section 1</h2>
> Stuff about section 1.
>
> <h2>Section 2</h2>
> An overview of section 2.
>
> <h3>Section 2a</h2>
> A subsection within section 2.
>
> <h3>Section 2b</h2>
> Another subsection within section 2.
>
> <h2>Section 3</h2>
> The closing section.
> </body>
> </html>
>
> and I'd like it to render as
>
> Title Page (really big bold font)
> Some content, perhaps the intro.
>
> Section 1 (big bold font)
> Stuff about section 1.
>
> Section 2 (big bold font)
> An overview of section 2.
>
> Section 2a (big italic font)
> A subsection within section 2.
>
> Section 2b (big italic font)
> Another subsection within section 2.
>
> Section 3 (big bold font)
> The closing section.
>
> I've tried a bunch of options, but to no avail. I've even made some
> attempts
> creating div elements underneath each heading, but a) I haven't gotten
> it to
> work correctly, either, and b) having to change all of my pages would
> really
> suck. Any thoughts would be greatly appreciated!

--
------------------------------------------------------------------
Christopher M. Reigrut chris@teravation.com
Principal www.teravation.com

Teravation Phone: (303) 682-9631
11705 Pleasant Hill Rd. Fax: (303) 682-9632
Longmont, CO 80504 Mobile: (303) 960-9831

"Here's the difference between theory and practice:
In theory, practice and theory are the same. In practice, they aren't"