Stylesheets - Indenting headings and adjacent siblings?

Author

Indenting headings and adjacent siblings?

sgarfunkle@hotmail.com

2005-11-23, 6:36 pm

I have a complex document that goes several heading levels deep, and
it's unreadable with all the headings and paragraphs against the left
margin. I'd like to indent H2 elements by 50 pixels, H3 elements by
100 pixels, and so on. The tricky part is that I need to get the
paragraphs following each heading as well.

Grouping everything in a DIV isn't an option for me, because I'm not
the one generating the HTML (It's being done by a POD to HTML
converter: http://search.cpan.org/dist/Pod-HtmlEasy/).

Here's the "solution" I came up with using adjacent selectors:

.pod H2,
.pod H2 + *,
.pod H2 + * + *,
[snip]
.pod H2 + * + * + * + * + * + * + * + * + *,
.pod H2 + * + * + * + * + * + * + * + * + * + * { margin-left: 50px;
}
.pod H3,
.pod H3 + *,
.pod H3 + * + *,
[snip]
.pod H3 + * + * + * + * + * + * + * + * + *,
.pod H3 + * + * + * + * + * + * + * + * + * + * { margin-left: 100px;
}
[etc...]

Now, this works, but, a few problems come to mind immediately:
-The CSS is butt-ugly.
-It boosts the size of my resulting document considerably.
-Any more than 10 paragraphs under one heading, and the 11th will drop
back to the left margin.

Is there a better way to do this, ideally not involving an enclosing
element (which will be hard for me to generate)? Any help is most
appreciated!

Spartanicus

2005-11-24, 6:29 pm

sgarfunkle@hotmail.com wrote:

>Grouping everything in a DIV isn't an option for me, because I'm not
>the one generating the HTML (It's being done by a POD to HTML
>converter: http://search.cpan.org/dist/Pod-HtmlEasy/).

Change the PERL script so that it wraps groups in a div.

--
Spartanicus

sgarfunkle@hotmail.com

2005-11-28, 7:04 pm

OK, I guess that's the "right" way to do it, and I was able to without
modifying the original source. Here's what I did, for reference by
Perl/Pod::HtmlEasy users:

#Create the Pod::HtmlEasy object...
my $podhtml = Pod::HtmlEasy->new(
#[snip]
#Revise the handler for =head2.
on_head2 => sub {
my ($this, $txt, $a_name) = @_;
my $html = '';
my $level = 2;
$html .= "</div>\n\n\n" if $this->{HEADING_LEVEL};
$html .= "<div class='h$level'>\n";
$this->{HEADING_LEVEL} = $level;
$html .= "<a name='$a_name'></a><h$level>$txt</h$level>\n\n";
},
#[Similar subroutine reference for on_head3]
);

That wraps the heading and subsequent items in a "<div
class='h2'>...</div>". Then I can do this in my stylesheet:

.h2 { margin-left: 50px; }
.h3 { margin-left: 100px; }
/*etc.*/

Works like a charm, even in IE.

The path I was on lead to madness; so thanks for the guidance.