Record guitar chords HTML + CSS (so far without barre)

How do you usually imagine guitar chords on web pages?
Pictures!

That's just not always convenient, because they have to draw.

Here I had an idea:
display guitar chords using only HTML and CSS.

I describe the chord as:
The name, the string data column, the chord field.
The label indicates the clamped string and pressing her finger. The values ​​of the other labels are shown in the figure.
')
While I made a display of only simple chords, it is time to display barrels.
If someone comes up - welcome with suggestions.

Actually the performance of the neck of the guitar is made on the lists. 4 lists: 1 - for marks of sounding, 2..4 - for frets.

How it looks in Html

 <div class="accord float-l"> <div class="accord-name">Dm</div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span>0</span></li> <li><span>X</span></li> <li><span>X</span></li> </ul> <div class="grif"> <div class="porojek verx"></div> <ul> <li><span>©<small>1</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span>©<small>2</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span>©<small>3</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <div class="clearfix"></div> </div> </div><!-- /accord Dm --> 
 

<div class="accord float-l"> <div class="accord-name">Dm</div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span>0</span></li> <li><span>X</span></li> <li><span>X</span></li> </ul> <div class="grif"> <div class="porojek verx"></div> <ul> <li><span>©<small>1</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span> </span></li> <li><span>©<small>2</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <ul> <li><span> </span></li> <li><span>©<small>3</small></span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> <li><span> </span></li> </ul> <div class="porojek"></div> <div class="clearfix"></div> </div> </div><!-- /accord Dm -->


Blank lines must be filled with a non-breaking space, which is not displayed, so that normal browsers (FF for example) display these lines.

Making Html with CSS

   / * Accord * /
   div.accord {
       width: 162px;
       margin: 1em;
  	 }
    div.accord .accord-name {/ * Chord name * /
       text-align: center;
       font-size: 1.4em;
       font-weight: bold;   
    }
       div.accord div.grif {/ * We make the bar * /
          height: 7.4em;
          overflow: hidden;
       }
          div.accord div.grif .porjek {/ * Making the threshold between frets * /
             width: 2px;
             height: 6.4em;
             float: left;
             background: black;
             margin: .4em 0 0 0;
          }
          div.accord div.grif .porjek.verx {/ * We decorate the first threshold, it is wider * /
             width: 4px;
          }
          div.accord .grif ul {/ * one field for a chord * /
             width: 46px;
             float: left;
             margin-top: -.6em;  / * field we pull up * /
             line-height: 11px;
          }
             div.accord .grif ul li {
                text-align: center;  / * in the middle of the field we place the label of the pressed string * /
                border-bottom: 1px dotted gray;  / * draw string * /
             }
                div.accord .grif ul li span {
                   position: relative;
                   bottom: -.6em;  / * position the label in the middle of the string * /
                   font-size: 1em;
                   font: Verdana;
                }
                   div.accord .grif ul li span small {/ * the number of the finger pressing the string * /
                      font-size: .9em; 
                      position: relative;
                      bottom: 2px;  / * move the label slightly up and to the right * /
                      left: 1px;
                   }
      
    div.accord ul {/ * marks before the chord about the sound of the strings * /
       width: 12px;
       float: left;
       line-height: 12px;
    }
    #content dl {/ * list of symbols * /
       font-size: 1.2em;
    }
    #content dl dt {
       font-weight: bold;
    }

To reset browser default styles, reset.css from Yahoo! is used. UI Library .

View live demo

UPD: only IE7, FF3, Opera 9 tested

UPD 03/21/2009: Read about the version with barre support in the next topic .