Sent by Shirley Kaiser, SKDesigns on 14 July 2004 18:06
At 08:16 AM 7/14/2004, Eric A. Meyer typed:
>At 23:26 -0400 7/13/04, jon hermansen wrote:
>>I need to put song lyrics on a website, and would preferably need to
>>divide up verses. Should I use a <p> tag per line, and seperate verses
>>with a <div> tag? Or is my thinking completely wrong?
>
>I do it like this on meyerweb.com:
>
> <blockquote class="lyric">
> When we are young
> Wandering the face of the Earth
> Wondering what our dreams might be worth
> Learning that we're only immortal
> For a limited time...
> </blockquote>
>
>And then apply the following CSS:
>
> blockquote.lyric {font-style: italic; white-space: pre;
> border: none; margin-left: 1em;}
>
>The important part is the use of 'white-space: pre', which causes the
>contents' white space (extra spaces, carriage returns) to be honored, just
>as they are for a 'pre' element.
> You could turn that around and do something like this:
>
> <pre class="lyric">
> We travel on the road to adventure
> On a desert highway straight to the heart of the sun
> Like lover and heroes
> And the restless part of everyone
> We're only at home when we're on the run...
> </pre>
>
>Then you'd just style something like this:
>
> pre.lyric {font-family: italic Georgia, Times, serif;}
>
>...or whatever font you prefer.
I was going to write something like what Eric already sent in, so I lean
toward Eric's approach here. His approach uses more appropriate markup,
IMO, in addition to being so much cleaner and leaner. I personally hate to
see so many <span> tags as shown in other examples in this thread. I prefer
to use <span> only as a last resort.
I also like to think in terms of longevity and long term maintenance. For
myself, I'd rather work with Eric's cleaner, leaner page, and it would be
easier for me to make changes later since every single line isn't wrapped
with span tags, div tags, etc.
That's my 2 cents. :-)
Warmly,
Shirley
--
Shirley E. Kaiser, M.A., SKDesigns [EMAIL-REMOVED]
Website Design, Development http://skdesigns.com/
WebsiteTips: Design Resources http://websitetips.com/
Brainstorms and Raves http://brainstormsandraves.com/
WaSP Steering Committee http://webstandards.org/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
