Wow, Frank, you got some crappy replies to your question (though I do
agree with Jukka about Sledge's reply.) Anyway, here's my take:
First of all, never, ever "forget" the </h1> tag. While it's true that
some browsers will "recoer" from this error, others won't. In short,
it'll render the way you want it on some browsers and not on others.
While you're at it, never "forget" any close tags. That goes for <img>,
<p> and everything else, too. I might add here, that I tested your
samples on Firefox 1.07 and IE6 and I couldn't reproduce the behavior
you describe; like I said, browser behavior will vary drastically if you
don't close your tags.
If I'm understanding your question correctly, you want to kill the space
between an <h1> and <h2> tag. Let's start with *why* there's space
between the two. Most modern browsers have a default style sheet which
determines all of these characteristics. Those default style sheets
vary from browser to browser, but you can rest assured that there's
margin/padding specified below the <h1> or before the <h2>.
You can *see* padding; just set a background color and you can see where
the padding is. You can't see margin, tho, but you can guess it's there
based on where elements are placed. So let's start with this:
<h1 style="background-color: blue;">h1 text</h1>
<h2 style="background-color: green;">h2 text</h2>
Chances are, you will see that the background tightly surrounds the text
(and extends to the width of the window) and there's space between the
blue and green boxes. That space is caused by the margins. Let's get
rid of both the top and bottom margins:
<h1 style="background-color: blue; margin-bottom: 0;">h1 text</h1>
<h2 style="background-color: green; margin-top: 0;">h2 text</h1>
Now your elements should be butted up against one another. Use an
element selector in your stylesheet to set this property for *all* h1 &
h2 elements. Keep in mind that setting the margin is indiscriminate:
you will find regular text is now closer to your headings, too.
Oh, and one last thing: I would strongly reccommend you to surround
*all* text in some kind of block element, like <p> or <div>. For example:
GOOD:
<body>
<h1>Header Text</h1>
<h2>Subheader Text</h2>
<p>Blah blah blah</p>
</body>
BAD:
<body>
<h1>Header Text</h1>
<h2>Subheader Text</h2>
Blah blah blah
</body>
Don't forget to use a validator to make sure you're not writing stupid
code: http://validator.w3.org/
Cheers,
T
> Hi,
> I've got a little problem:
> If I "forget" the </h1>-tag, html produces just a line break.
> If I add the </h1> I get an empty line.
> How to avoid this?
>
> Example:
>
> Code 1:
> <h1>EXAMPLE<h2>More Text
> Output 1:
> EXAMPLE
> More Text
>
> Code 2:
> <h1>EXAMPLE</h1><h2>More Text</h2>
> Output 2:
> EXAMPLE
>
> More Text
>
> Thanks for Your help!
>
> Frank
>
>
|
