SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    retaining spaces between text

    I am new at web design but having fun trying things out. I have a particular question (my first).

    My site is for my guitar teaching business, and I am putting up one or two resources involving guitar chords and lyrics. What's the best way to maintain spaces in lines of text?

    eg, line 2 will be a line of lyrics, and line 1 will be the chord progression above it - 3-4 characters, needing to be spaced correctly over the relevant lyric.

    G Am
    lyric lyric lyric lyric

    Thanks in advance...

    (PS, I'm having trouble navigating parts of this site because all the combo boxes display with the words overlapping - almost impossible to read)

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2009
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand the question, you can do it with
    Code:
     

  3. #3
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha...

    This thread is a good illustration of the problem. When I typed the chords and lyric lines the G was over the middle of the 1st "lyric", and the Am was over the 3rd "lyric", but in the posted thread they collapse...

  4. #4
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vernon-oliver View Post
    If I understand the question, you can do it with
    Code:
     

    I thought about that, but depending on the layout I may need that expression 5, 10, 15 times in a row depending where the chords need to align. That didn't sound very efficient to me.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solutions are depending on the context.

    I guess you have a text contained by paragraphs, then give an example of chords and lyrics, and then continue the text in next paragraph. Or maybe a simple chart divided in paragraphs.

    Your example could be coded like this:
    HTML
    Code:
    <p class="chords>
        <span>G<br>lyric</span><span>&nbsp;<br>lyric</span><span>Am<br>lyric</span><span>&nbsp;<br>lyric</span>...
    </p>
    CSS
    Code:
    .chords{
        display: inline-block; /* for IE6 to set hasLayout in order to enclose floats */
    }
    .chords{
        display: block; /* resets the p display to default */
        overflow: hidden; /* make the p enclose the floats */
    }
    .chords span {
        float: left; /* the two line spans will line up in a row and then wrap to next row */
        margin-right: 0.6em; /* mimics a normal word spacing */
        height: 2.4em;
        line-height: 1.2em;
        text-align: center; /* the short upper line will center over the lower line */
    }
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For fear of getting shot down in flames, may I suggest a simple solution is to use a 2 row table, with each column containing the chord and the lyric:

    HTML Code:
    <table>
    <tr>
    <td>chord 1</td>
    <td>chord 2</td>
    </tr>
    <tr>
    <td>lyric 1</td>
    <td>lyric 2</td>
    </tr>
    </table>
    Not very 'pc' but does the job quickly and easily for amatures
    monkey - the rest is history

  7. #7
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all who responded.

    Erik, your arrangement worked perfectly - sort of. I cut and pasted your code into a sample page with attached css sheet including just those properties. The resulting page layout there was exactly what I wanted.

    But when I tried it out on my full web page, it didn't work. Perhaps a clash of properties relating to other elements? Got any tips about arranging your css sheet? Or is it something else completely?

    If it's helpful, my basic body context is text with paragraphs and the occasional diagram/image. I'm structuring it like this:

    Each block of teaching notes goes into...

    <div class="narrative">
    <p>
    <p> etc
    </div>

    and each sample of music/chords goes into...

    <div class="song">
    </div>


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
  •