Re: Question: Identation based on first child, how?

Alix Pexton wrote:

> I have a specification document in HTML where each sub-part uses the next
> smallest heading than the last, a standard form I believe. Each subpart is
> its own DIVision, (child of the body element), with the heading and a
> number of paragraphs. I want to have it so each level of sub-part was
> subtly more indented than its parent, and use CSS to do it.
> 
> I was trying to figure out a way to indent a division bassed on what the
> first tag inside it was, i.e. if the first tah was <h1> no indent, <h2>
> 2 pixels and so on, but I couldn't get it to work. As far as I can
> see it would either be the oposite of the > selector in CSS2 (< ?) or
> mabe the oposite of the + selector also in CSS2 (- ?), but I cannot find a
> way to perform the exact formatting I require.
> 
> Is there a simple way to achieve this style of formating, or a subtly more
> complex one, or will I have to restructure my documents, which are quite
> lengthy and I don't really want to have to change.
> 
> All help appreciated...

If my understanding of your mail is correct, what you want to do
is quite impossible with the existing selectors because 1) you miss
an "indirect adjacent sibling selector" 2) because the subject of
a selector is always the element selected by the last sequence of simple
selectors of the selector 3) there is an arbitrary number of paragraphs
in your sections.

4 solutions :

a) add a "sec1" class to DIV sections 1, "sec2" to sections 2, ...
   add the following styles

   DIV.sec2 { margin-left: 2px }
   DIV.sec3 { margin-left: 4px }
   DIV.sec4 { margin-left: 6px }
   DIV.sec5 { margin-left: 8px }
   DIV.sec6 { margin-left: 10px }

b) nest your DIVs, add a class "section" to them and
   use the following rule:

  DIV.section { margin-left : 2px }

  which is IMHO simpler and more intuitive, works on existing
  browsers, but implies a rewriting of your document in a more
  structured way

c) don't write your documents in HTML but use a XML dtd and translate
   the instances into HTML ; this is better than c) but implies more
   technos

d) ask for an extension of CSS selectors (my favorite ;-)

Hope that helps,

</Daniel>

Received on Monday, 15 March 1999 08:09:14 UTC