SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Indent 2nd Line of Text

    What is the best way to indent a 2nd line of text in HTML?
    Example:

    If children live with criticism,
    they learn to condemn.
    If children live with hostility,
    they learn to fight.
    If children live with fear,
    they learn to be apprehensive.

    I want the line "they learn..." indented on each line.

    ANY help would be greatly appreciated
    Thank you, Karen

  2. #2
    SitePoint Addict Troy1960's Avatar
    Join Date
    Jan 2003
    Location
    GA
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
      Use that wherever you want a little more space.


    Gunwallet.com- Digitally backup vital gun information.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for responding. This is a school assignment and my teacher doesn't like us using the non-breaking space. Any other suggestions? This is a CSS class. Is there a way of styling it to indent?
    Thanks, Karen

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would create a CSS class that has a text-indent property (however many pixels you want to indent it in) and then for every line you want to indent then do <p class = "indent"> or even <span class = "indent">

    E.g.

    .indent {
    text-indent: 10px;
    }


    <p>If children live with criticism, <p>
    <p class = "indent">they learn to condemn.</p>

    Note: I could be on the completely wrong track but from what I've interpreted your problem as, then this is what I would do. There could be better ways, I'm still a beginner.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karen615 View Post
    What is the best way to indent a 2nd line of text in HTML?
    HTML is a markup language. It says what things are, but it says nothing about how they look. To affect presentation, use CSS. In this case you could use a negative indention in combination with a left padding.

    Code HTML4Strict:
    <p>If children live with criticism,
    <br>they learn to condemn.</p>
     
    <p>If children live with hostility,
    <br>they learn to fight.</p>
     
    <p>If children live with fear, 
    <br>they learn to be apprehensive.</p>
    Code CSS:
    p {
      margin:0;
      padding-left:1em;
      text-indent:-1em;
    }

    Quote Originally Posted by Troy1960 View Post
    &nbsp; Use that wherever you want a little more space.
    No, no, no, no, NO!
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    No, no, no, no, NO!
    Maybe he could use a spacer gif...?

  7. #7
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the purposes of your course-work, Tommy's suggestion is the proper css solution.

    Howsomever …

    The text has every appearance of being quoted text in verse form. In which case, the markup has requirements. First, being quoted material, it belongs in the blockquote element. Second, as verse is rhythmic text, usually with formatted typography, it should be marked as pre(formatted).
    Code:
    <blockquote class="verse">
      <pre>
    If children live with criticism,
       they learn to condemn.
    If children live with hostility,
       they learn to fight.
    If children live with fear,
       they learn to be apprehensive.</pre>
    </blockquote>
    ==================
    .verse {
      margin: 1em 0;
      }
    
    .verse pre {
      font-family: inherit;   /*pre usually defaults to a monospace family, so this
                                causes it to remain the same as the rest of the page.
                                unfortunately, IE<8 doesn't  support inherit and must 
                                have an explicit family.*/
      }
    See Poetry and verse in the html page for a more complete explanation.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Karen, I was being snarky with the spacer.gif bit (always trying to get a rise out of Tommy). I thought that since you're doing this for course credit, I'd better be clear. If you go to your professor with the idea of using something like that for your spacing, he'll make you scrub the lavatory or something. It's a technique that's long, long out of date. Both Tommy and Gary's suggestions are excellent. I particularly like Gary's page on formatting poetry.

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    HTML is a markup language. It says what things are, but it says nothing about how they look.
    if that's true, then P is the wrong element

    those lines aren't paragraphs, they are--at best--sentences

    and BR is clearly presentational

    so there

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    if that's true, then P is the wrong element

    those lines aren't paragraphs, they are--at best--sentences

    and BR is clearly presentational

    so there

    The appearance serves a semantic purpose in this case. Essentially it provides the end user a contextual understanding of the content.

  11. #11
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    oh, that's just wonderful... you don't mind if i quote you?

    "a noted web expert has declared that appearance can serve a semantic purpose by providing contextual understanding"

    so much for the vaunted separation of form from content

    in plain english, it sounds like you're saying that it's okay to use presentational tags like BR when it's convenient to do so

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  12. #12
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    in plain english, it sounds like you're saying that it's okay to use presentational tags like BR when it's convenient to do so
    The br tag is not always a presentational tag; it's how you utilize it.

    I was basically advocating that appearance sometimes gives the end user some distinction to further convey the meaning of content.

    E.g.
    h1-h6 ul, ol, etc....

    Disable a stylesheet and view the visual hierarchy of a web page.
    Would you agree that the visual appearance further conveys the actual semantics of these elements, thus further describing the content to the end user?

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    if that's true, then P is the wrong element
    It probably is, in this case. It's difficult to say without knowing the full context. I didn't want to get into that discussion, though, since it would probably derail the thread instead of helping Karen with her immediate problem.

    Not that I usually refer to HTML5 as a beacon for semantics, but the HTML5 spec says (or at least said last time I looked) that <p> is appropriate for marking up a stanza in a poem. (On the other hand, it also said that <p> could mark up 'a part of a form', probably meaning a label/input pair.)

    Quote Originally Posted by r937 View Post
    those lines aren't paragraphs, they are--at best--sentences
    A sentence can make up a paragraph. Many, many paragraphs consist of a single sentence. The one below this one, for instance.

    In this case I'd say using <pre> is the most appropriate, although you'd probably want to use some CSS as well to change the font, since browsers generally render preformatted text in a monospaced font like Courier New (ugh!).

    Quote Originally Posted by r937 View Post
    and BR is clearly presentational
    Often, yes. But not always, which is why there is a <br> tag even in the Strict DTDs. A line break can, in certain cases, have meaning or affect the meaning of something. In the case of poetry this is quite common.
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU so much to everyone who replied. They are all great suggestions. This is a helpful message board for a novice like myself.
    Karen


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •