View Single Post
Old 04-03-2008, 09:29 AM   #23
Taylor514ce
Actively passive.
Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.Taylor514ce ought to be getting tired of karma fortunes by now.
 
Taylor514ce's Avatar
 
Posts: 2,042
Karma: 478376
Join Date: Feb 2008
Location: US
Device: Sony PRS-505/LC
Yes, it's ok to use "poem" as a class selector for different tags. Indeed, that's the beauty of a class selector and even CSS... styles "cascade" downward.

What I don't care for are the empty spans. It seems the lines of your stanza should be within the span tags. You're rightly using what is called "semantic" markup. An empty span has no syntax.

Then too, some of your lines aren't enclosed in spans, which again alters the semantics of those lines. I think a more "proper" HTML would be:

Code:
<html>
    <head>
        <title>Poetry Test</title>

        <style type="text/css">
            .indent1 { padding-left: 1.2em; }
            .indent2 { padding-left: 6.0em; }
            body { font-family: Georgia, serif; }
            div.poem { white-space: nowrap; }
            h1 { margin-top: 0.4em; text-align: center; font-size: 1.2em; }
            p {text-indent: 1.2em; }
            p.poem { text-indent: 0; }
        </style>

    </head>

    <body>
        <h1>SUNRISE IN THE FOREST</h1>

        <div class="poem">
            <p class="poem"><span>THE zephyrs of morning are stirring the larches,</span>
                <br /><span class="indent1">And, lazily lifting, the mist rolls away.</span>
                <br /><span>A paean of praise thro’ the dim forest arches</span>
                <br /><span class="indent1">Is ringing, to welcome the advent of day.</span>
                <br /><span class="indent2">Is loftily ringing,</span>
                <br /><span class="indent2">Exultingly ringing,</span>
                <br />From the height where a little brown songster is clinging,</span>
                <br /><span class="indent1">The top of a hemlock, the uttermost spray.</span>
            </p>
        </div>
     </body>
</html>
In fact, since "poem" will cascade down from the div to the paragraph, I think you could simplify this even further to:

Code:
<html>
    <head>
        <title>Poetry Test</title>

        <style type="text/css">
            .indent1 { padding-left: 1.2em; }
            .indent2 { padding-left: 6.0em; }
            body { font-family: Georgia, serif; }
            .poem { white-space: nowrap; }
            h1 { margin-top: 0.4em; text-align: center; font-size: 1.2em; }
            p { text-indent: 0; }
        </style>

    </head>

    <body>
        <h1>SUNRISE IN THE FOREST</h1>

        <div class="poem">
            <p><span>THE zephyrs of morning are stirring the larches,</span>
                <br /><span class="indent1">And, lazily lifting, the mist rolls away.</span>
                <br /><span>A paean of praise thro’ the dim forest arches</span>
                <br /><span class="indent1">Is ringing, to welcome the advent of day.</span>
                <br /><span class="indent2">Is loftily ringing,</span>
                <br /><span class="indent2">Exultingly ringing,</span>
                <br />From the height where a little brown songster is clinging,</span>
                <br /><span class="indent1">The top of a hemlock, the uttermost spray.</span>
            </p>
        </div>
     </body>
</html>
I appreciate your diligence in pursuing poetry formatting. Thank you.

Last edited by Taylor514ce; 04-03-2008 at 09:52 AM. Reason: fixed typos
Taylor514ce is offline   Reply With Quote