Title followed by a horizontal rule on the same line



Griff
07-09-2005, 11:09 PM
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">Living on Mars<hr/></div>
<div class="body">Live 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


PS: Also posted to "comp.infosystems.www.authoring.stylesheets"

Adrienne
07-09-2005, 11:09 PM
Gazing into my crystal ball I observed "Griff" <Howling@The.Moon> writing
in news:#3cYNcBaFHA.2076@TK2MSFTNGP15.phx.gbl:

> 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
>

<h2>Living on Mars</h2>
<p>Living on Mars would be at best
impracticle for the following reasons:</p>
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>

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

<h2>Living on Earth</h2>
<p>Life has evolved on earth for the following reasons:</p>
<ul>
<li>blah</li>
<li>blah</li>
</ul>

> I'm guessing the mark up I should be using would be as follows (please
> advise if rubbish)
>
>
><div class="section">
> <div class="title">Living on Mars<hr/></div>
> <div class="body">Live has evolved on Mars....</div>
></div>
>
>
> (for example I'm not sure whether I should be using <span/> instead of
><div/> here).

You _could_ use div, but the above makes more sense semantically.

>
>
> And...I'm clueless about how to write the CSS to control the <hr/>
> within the <div class="title"/>.

I played with it, and trust me, it a) looks odd, b) is very hard to get
working right. My suggestion is to style the H2 element nicely.

> Also, is it possible to have the
><hr/> inserted by the style-sheet (i.e. not included in the mark up at
> all)?

No. You cannot insert elements into stylesheets and have them render. You
can only style elements that are in the actual document.

>


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

and Opera, and Safari, and ....



--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share


Title followed by a horizontal rule on the same line