Headers (H1,H2,H3 etc) without a trailing blank line ?

[George B]

Is it possible to use headers (H1, H2, H3 etc) but without a blank line
being inserted after them ? For example, at the moment the html I have
written gives me....
THIS IS THE HEADER

This is the paragraph of text

What I actually want to see is.....
THIS IS THE HEADER
This is the paragraph of text

[Jeff Thies]

"George B" <gb******@hotmail.com> wrote in message
news:c0*********@news5.svr.pol.co.uk...

Is it possible to use headers (H1, H2, H3 etc) but without a blank line
being inserted after them ?
I believe, that margin-bottom: 0px, is all you need.

Jeff

For example, at the moment the html I have
written gives me....
THIS IS THE HEADER

This is the paragraph of text

What I actually want to see is.....
THIS IS THE HEADER
This is the paragraph of text

[Neal]

On Mon, 09 Feb 2004 03:20:12 GMT, Jeff Thies <no****@nospam.net> wrote:

"George B" <gb******@hotmail.com> wrote in message
news:c0*********@news5.svr.pol.co.uk...

Is it possible to use headers (H1, H2, H3 etc) but without a blank line
being inserted after them ?

I believe, that margin-bottom: 0px, is all you need.

Jeff

Actually, since p has a top margin, that won't be enough. This should work
in all visual-display CSS browsers, but is cumbersome.

<h2>Heading</h2>
<p class="afterh">Text</p>
<p>More text</p>

h2 {
margin-bottom: 0;
}

p.afterh {
margin-top: 0;
}

[Ney André de Mello Zunino]

Neal wrote:

p.afterh {
margin-top: 0;
}

One could avoid having to create a specific class for this purpose by
using an adjacent selector:

h2 + p
{
margin-top: 0;
}

That way, the document needs not be changed and maintenance is
facilitated. The only problem left is, guess it, browser support. But I
would not care about it in this particular case.

Anyway, to the OP, next time please post messages of this kind to a more
appropriate newsgroup like c.i.w.a.stylesheets.

Regards,

--
Ney André de Mello Zunino

[Tim]

On Mon, 9 Feb 2004 02:49:09 -0000,
"George B" <gb******@hotmail.com> wrote:

Is it possible to use headers (H1, H2, H3 etc) but without a blank line
being inserted after them?
Actually, there isn't a blank line between them (just try putting the
cursor between them, and you'll discover there's nowhere for it to go),
just extra spacing between/around them.
What I actually want to see is.....

THIS IS THE HEADER
This is the paragraph of text

You'll want to play with the margins and padding for the h elements
(I'll suggest both, because you don't know what the defaults are for all
browsers).

e.g.

h1, h2, h3 {
margin-bottom: 0em;
padding-bottom: 0em;
}

Adjust the em value to suit, you may want a small but non-zero value.

Then you'd want to do something similar for p elements *following* h
elements.

e.g.

h1+p, h2+p, h3+p {
margin-top: 0em;
padding-top: 0em;
}

Something similar to that ought to get you started. But this is a
styling than HTML issue, and you might want to try a different news
group for more help: comp.infosystems.www.authoring.stylesheets

--
My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.

This message was sent without a virus, please delete some files yourself.

[Stan Brown]

It seems "Ney André de Mello Zunino" wrote in
comp.infosystems.www.authoring.html:

One could avoid having to create a specific class for this purpose by
using an adjacent selector:

h2 + p
{
margin-top: 0;
}

Your solution is correct according to the spec, so I'm sure it won't
surprise you that MSIE gets it wrong. MSIE doesn't handle adjacent
selectors correctly; from the above all p's (or maybe all h2's,
can't remember off hand) will have zero top margin.

Followups to comp.infosystems.www.authoring.stylesheets

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/