Title followed by a horizontal rule on the same line

  • Thread starter Thread starter Griff
  • Start date Start date
G

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">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"
 
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
Click to expand...

<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>
Living on Earth ---------------
Life has evolved on earth for
the following reasons: blah blah
blah
Click to expand...

<h2>Living on Earth</h2>
<p>Life has evolved on earth for the following reasons:</p>
<ul>
<li>blah</li>
<li>blah</li>
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).
Click to expand...

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"/>.
Click to expand...

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)?
Click to expand...

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...
Click to expand...

and Opera, and Safari, and ....
 
Back
Top