471,599 Members | 1,302 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

line-height question..

hi,

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

<div class="headlines">
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..
Nov 6 '07 #1
3 2716
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
Nov 6 '07 #2
On 2007-11-06, maya <ma********@yahoo.comwrote:
hi,

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

<div class="headlines">
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?
Nov 6 '07 #3
maya wrote:
hi,

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

<div class="headlines">
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="headlines">
<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
Nov 6 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

19 posts views Thread by les_ander | last post: by
6 posts views Thread by magix | last post: by
14 posts views Thread by WStoreyII | last post: by
reply views Thread by 7stud | last post: by
11 posts views Thread by xdevel | last post: by
19 posts views Thread by =?Utf-8?B?QnJpYW4gQ29vaw==?= | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.