Title followed by a horizontal rule on the same line

[Griff]

What I'm trying to achieve is to have a title followed by a horizontal
rule on the same line. For example:

Living on Mars ----------------
Living on Mars would be at best
impractical for the following
reasons: blah blah blah

Living on Earth ---------------
Life has evolved on earth for
the following reasons: blah blah
blah

I'm guessing the mark up I should be using would be as follows (please
advise if rubbish)

<div class="section" >
<div class="title">L iving on Mars<hr/></div>
<div class="body">Li ve has evolved on Mars....</div>
</div>

(for example I'm not sure whether I should be using <span/> instead of
<div/> here).

And...I'm clueless about how to write the CSS to control the <hr/>
within the <div class="title"/>. Also, is it possible to have the
<hr/> inserted by the style-sheet (i.e. not included in the mark up at
all)?

This would have to work with IE6 as well as Firefox...

All help would be much appreciated!

Thanks

Griff

[Christoph Päper]

Griff:

Living on Mars ----------------
Living on Mars would be at best

<div class="section" >
<div class="title">L iving on Mars<hr/></div>
<div class="body">Li ve has evolved on Mars....</div>
</div>
The heading element types ('h1' through 'h6') are there for a reason and
I don't beleive you need to embed the paragraph(s) ('p') of text in yet
another 'div'.

<div class="section" >
<h2>Living on Mars</h2>
<p>Living on Mars would be at best...</p>
</div>

.section {border-top: thin solid;}
h2 {position: relative; top: -0.5em; margin: 0;
background-color: white; width: 25%;}

You'll probably have to adjust margins and paddings. If you don't want
to use a "fixed" width like that "25%", you'd have to let the 'h2' box
automatically shrink to fit its content. There a several ways to achieve
that (with 'float' or 'display'), none of which works in all browsers
(the same).

<evil>Or you strongly abuse HTML by using 'fieldset' and 'legend'.</>
(for example I'm not sure whether I should be using <span/> instead of
<div/> here).

Hey, you already know *both* element types of HTML! (Well, and 'hr'.)

[Lars Eighner]

In our last episode,
<11************ *********@g43g2 000cwa.googlegr oups.com>,
the lovely and talented Griff
broadcast on comp.infosystem s.www.authoring.stylesheets:

What I'm trying to achieve is to have a title followed by a horizontal
rule on the same line. For example: Living on Mars ----------------
Living on Mars would be at best
impractical for the following
reasons: blah blah blah Living on Earth ---------------
Life has evolved on earth for
the following reasons: blah blah
blah I'm guessing the mark up I should be using would be as follows (please
advise if rubbish) <div class="section" >
<div class="title">L iving on Mars<hr/></div>
<div class="body">Li ve has evolved on Mars....</div>
</div> (for example I'm not sure whether I should be using <span/> instead of
<div/> here). And...I'm clueless about how to write the CSS to control the <hr/>
within the <div class="title"/>. Also, is it possible to have the
<hr/> inserted by the style-sheet (i.e. not included in the mark up at
all)? This would have to work with IE6 as well as Firefox... All help would be much appreciated!
One suggestion might be:

<div>
<h6 class="alpha">L iving on Mars</h6><hr class="beta" />
</div>
<p>Life has evolved on Mars &hellip;</p>

with styles

..alpha {display: inline; }
..beta {display: inline; width: 10em; }

or something of the sort, with the heading level and width
adjusted appropriately.

This doesn't work in Firefox and doesn't work in Opera, so I
guess it probably won't work in IE. (You get a vertical hairline
in both cases.)
This would have to work with IE6 as well as Firefox...

Let's think about this. The essence of what HR is supposed to
mean is a separator. It doesn't make any sense to separate the
header from its text. So it is hard to fault browsers which
don't understand inlining HR. But maybe they do understand: a
vertical hairline *is* an inline separator, so the browser
people have a pretty good rationale for this rendering -- if
they did it on purpose.

What you want is strictly a visual effect which really doesn't
have any meaning.

So how about

<h6>Life on Mars <img src="myrule.gif " alt=""></h6>

With the empty alt, that should do it -- as much as it can be
done. The alt is empty because your rule is purely decorative
and has no meaning. You could make alt="-------" for a similar
appearance in text browsers, but you probably don't really want
speech browsers trying to render "-------".
--
Lars Eighner ei*****@io.com http://www.larseighner.com/
"Fascism should more properly be called corporatism, since it is the
merger of state and corporate power."-Benito Mussolini * When you write the
check to pay your taxes, remember there are two l's in "Halliburto n."