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!