retaining spaces between text

[peterkp]

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)

[vernon-oliver]

If I understand the question, you can do it with

 

[peterkp]

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...

[peterkp]

If I understand the question, you can do it with

 

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.

[Erik J]

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

<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

.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 */
}

[boxhead]

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:

<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

[peterkp]

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>