line-height question..

[maya]

hi,

what is best way of doing this.. I have a bunch of headlines, one after
the other, thus:

<div class="headline s">
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br>
</div>

I want line-height to apply BETWEEN headlines, not WITHIN headlines (as
some headlines will no doubt be longer than one line..) what is best way
of doing this, please.. css:

..headlines {font-size:14px; line-height:20px; }

do I have to do one div per headline... I'm hoping there's a better way..

thank you very much..

[Beauregard T. Shagnasty]

Re: line-height question..

maya wrote:

what is best way of doing this.. I have a bunch of headlines, one after
the other, thus:

You say they are headlines. Headers. Use a proper element.

<h2>Article Headline goes here lorem ipsum viderer</h2>
<h2>Article Headline goes here lorem ipsum viderer</h2>
<h2>Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer</h2>
<h2>Article Headline goes here lorem ipsum viderer</h2>
<h2>Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer</h2>

.headlines {font-size:14px; line-height:20px; }

h2 { font-size:140%; }

Don't use pixels for sizing.

http://k75s.home.att.net/fontsize.html

--
-bts
-Motorcycles defy gravity; cars just suck

[Ben C]

Re: line-height question..

On 2007-11-06, maya <maya778899@yah oo.comwrote:

hi,
>
what is best way of doing this.. I have a bunch of headlines, one after
the other, thus:
>
<div class="headline s">
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer<br>
></div>
>
I want line-height to apply BETWEEN headlines, not WITHIN headlines (as
some headlines will no doubt be longer than one line..) what is best way
of doing this, please.. css:
>
.headlines {font-size:14px; line-height:20px; }
>
do I have to do one div per headline...

Why not?

If you don't want to then you could do this:

br { display: block; margin-top: 20px; }

I'm hoping there's a better way..

What's wrong with the extra elements?

[Jonathan N. Little]

Re: line-height question..

maya wrote:

hi,
>
what is best way of doing this.. I have a bunch of headlines, one after
the other, thus:
>
<div class="headline s">
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem ipsum
viderer<br>
Article Headline goes here lorem ipsum viderer<br>
Article Headline goes here lorem ipsum viderer goes here lorem ipsum
viderer<br>
</div>
>
I want line-height to apply BETWEEN headlines, not WITHIN headlines (as
some headlines will no doubt be longer than one line..) what is best way
of doing this, please.. css:
>
.headlines {font-size:14px; line-height:20px; }
>
do I have to do one div per headline... I'm hoping there's a better way..
>

Well let's see your have a list of headlines...why are your not using a
list?? Also line-height is the "height of the line" of text, of course
is would not be added "between"! That is the function of margins and
padding.

BETTER:

/* adjust to suite */
ul.headlines {
margin: .5em; padding: 0; list-style: none; font-size: 1.5em;
}
ul.headlines li { margin: 0 .5em; }


<ul class="headline s">
<li>Article Headline goes here lorem ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer</li>
<li>Article Headline goes here lorem ipsum viderer goes here lorem
ipsum viderer</li>
</ul>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com