John Rowe <rowe@excc.ex.ac.uk> wrote:
> I run the web site for a University department. A few of
> my authors will carefully write:
>
> <h3>Title</h3>
> <p>Some text here.</p>
> <p>Second paragraph.</p>
That's fine (if it's really a 3rd level heading, i.e. a heading for a
subsection of the page), though it's generally a good idea to use id
attributes for all headings (e.g. <h3 id="foo">Title</h3> ). Such attributes
mainly let anyone link to a specific section or subsection, but they can
also be used to style an individual element. There's less temptation to use
a style="..." attribute when you already have an id attribute by which you
can refer to the element simply in CSS (using #foo).
> Most of us can't be bothered(!):
>
> <h3>Title</h3>
> Some text here.
> <p>Second paragraph.
And shouldn't. Loose text isn't good practice. Never was. "Some text here."
is clearly meant to be a paragraph and should be marked up as one. The idea
of <p> as a _separator_ is very obsolete (though it was part of the
original, pre-HTML 2.0 design of HTML). Moreover, it makes it impossible to
style the paragraph since it's not an element and you cannot refer to it in
CSS in any way.
> I would like my margin under the <h3> to be a little less than my
> margin between paragraphs.
Fine. So that's the real problem. One solution:
- use logical markup (the first method you described, with all paragraphs
marked up as paragraphs)
- set margin-top for p to 0 and margin-bottom to the desired value
(say 1em)
- set margin-top and margin-bottom for headings so that margin-top is
fairly large (1.5em might be OK) and margin-bottom is essentially
smaller (like 0.5em).
That way, the vertical space between h3 and p only depends on the
margin-bottom value you have set for h3. Paragraphs will be separated from
each other due to the margin-bottom setting.
This approach has some impact on what you might wish to do e.g. for
a (data) table followed by a paragraph. Since the paragraph now has no top
margin, you would need to set margin-bottom for table to avoid putting the
table and the paragraph too close. But it's usually a good idea to set
some vertical margins for a (data) table anyway.
> My problem is that I can't seem to come up
> with a selector that distinguishes between the two cases above, ie <h3>
> immediately followed by <p> and <h3> followed by text then <p>.
No, what you describe as a problem is just a dead-end attempt at a
solution. Luckily you described the real problem too!
> A selector like: h3 + p matches both.
Yes, but that's not practically very relevant, since IE doesn't support
such selectors at all.
> Is there a selector for 'naked' text?
No, and that's one reason why we should not use any naked text.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
|
01-22-05 - 12:21 AM 
