www.webdeveloper.com
Results 1 to 8 of 8

Thread: Displaying indented text correctly

  1. #1
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267

    Displaying indented text correctly

    Hi all,

    I want to remove as many 'br' and 'strong' and 'em' tags as possible from my page, so everything's pretty much controlled by CSS.

    I have a bit of an issue which I hope you can help me with.

    Code:
    .indent2 { margin-left: 10px; }
    .indent3 { margin-left: 20px; }
    .indent4 { margin-left: 30px; }
    
    <strong>word1:</strong> word2
    <br /><span class="indent2"><strong>word3:</strong> word4</span>
    <br /><span class="indent3"><strong>word5:</strong> word6</span>
    <br /><span class="indent4"><strong>word7:</strong> word8</span>
    <br /><span class="indent4"><em>word9</em></span>
    I've tried a few ways to compact the code (using h3/h4 tags - (h1 and h2 are used for other headings)) to align it more with CSS but this always causes words 2,4,6,8 to be pushed down a line.

    The output should look like this-ish:

    word1: word2
    &nbsp;word3: word4
    &nbsp;&nbsp;word5: word6
    &nbsp;&nbsp;&nbsp;word7: word8
    &nbsp;&nbsp;&nbsp;word9

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    When using the headings you would need to remove the next line-break and set the headings default margin to '0'.

  3. #3
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    So I'd still need to keep the spans but just change the strong's and em to h3 and h4 with margin 0?

  4. #4
    Join Date
    Jul 2006
    Posts
    207
    It really depends on what you prefer. If you're wanting to use headings you would set the margin to '0' and remove the next line break. I'm not entirely sure why you're wanting to use headings, however. The STRONG and EM tags can be accomplished with CSS. Your current setup does appear to work for the most part.
    Last edited by Cory R; 07-29-2011 at 07:26 AM.

  5. #5
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    Code:
    .indent2 { margin-left: 10px; display: block; }
    .indent3 { margin-left: 20px; display: block; }
    .indent4 { margin-left: 30px; display: block; }
    h3 { font-size: 12px; font-weight: bold; margin: 0px; display: block; }
    h4 { font-size: 12px; font-style: italic; font-weight: normal; margin: 0px; display: block; }
    
    <h3>word1:</h3> word2
    <span class="indent2"><h3>word3:</h3> word4</span>
    <span class="indent3"><h3>word5:</h3> word6</span>
    <span class="indent4"><h3>word7:</h3> word8</span>
    <span class="indent4"><h4>word9</h4></span>
    I still get the same problem - words 2,4,6,8 are being pushed down a line! arrggh!

  6. #6
    Join Date
    Jul 2006
    Posts
    207
    http://prntscr.com/2glx5

    That's what I see in Firefox 5.

  7. #7
    Join Date
    Jan 2003
    Location
    UK
    Posts
    267
    Yes... it's still wrong.

  8. #8
    Join Date
    Jul 2006
    Posts
    207
    Change 'block' to 'inline-block'.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles