The continuation of the idea of ​​recording guitar chords in HTML. Version 3 optimized options

We continue to develop the recording of chords in HTML. In the previous topic, selenit proposed an optimized version ( 1 , 2 ), where the code is even smaller.

For familiarization with the topic in detail, read the previous topic .


The code was reworked, now instead of 4 lists, 1 is used on which, as on the strings, everything is held.
Label & bull; Shchamena for a larger sipvol from unicode & # 9679;
')
When implementing the proposed selenit, it was possible to reduce the number of code, but I had to incur losses. In particular, the incorrect printing in Opera, IE - Acordies are torn apart. How to solve is not yet invented.
When scaling a page in IE, the numbers that represent finger numbers are shifted.
The version with the correct print can be seen in the previous version of the code .

For all versions: the type of chord depends on the size of the fonts, because If a font is used for a label, then with changing the font or its size, you need to change the parameters in CSS for correct display.

HTML and CSS code for chord styling.

HTML for several chords, a demonstration of large and small barre.

< h1 > v3 </ h1 >
< div class ="accord float-l" >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
< li >< span > x </ span ></ li >
< li >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > Dm </ h2 >
</ div >

< div class ="accord float-l" >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span class ="lad2" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
< li >< span > x </ span ></ li >
< li >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > D7 </ h2 >
</ div >
< div class ="accord float-l" >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span > 0 </ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span > 0 </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > C </ h2 >
</ div >
< div class ="clearfix" ></ div >
< div class ="accord float-l" >
< p class ="nomer-lada" > I </ p >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad0" >
< li >< span class ="lad1 barre bolshoe" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 4 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
</ ol >
</ div >
</ div >
< h2 > F </ h2 >
</ div >

< div class ="accord float-l" >
< p class ="nomer-lada" > I </ p >
< div class ="porog2 lad4" >
< div class ="porog3" >
< ol class ="lad0 lad4" >
< li >< span class ="lad1 barre s3" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad4" >< big > ● </ big >< small > 4 </ small ></ span ></ li >
< li class ="last" >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > Db </ h2 >
</ div >

< div class ="accord float-l" >
< p class ="nomer-lada" > II </ p >
< div class ="porog2" >
< div class ="porog3" >
< ol class ="lad2" >
< li >< span class ="lad1 barre s5" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li >< span class ="lad2" >< big > ● </ big >< small > 2 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 4 </ small ></ span ></ li >
< li >< span class ="lad3" >< big > ● </ big >< small > 3 </ small ></ span ></ li >
< li >< span class ="lad1" >< big > ● </ big >< small > 1 </ small ></ span ></ li >
< li class ="last" >< span > x </ span ></ li >
</ ol >
</ div >
</ div >
< h2 > Hm </ h2 >
</ div >

* This source code was highlighted with Source Code Highlighter .

See an example .

CSS code:

p.nomer-lada { margin: 0em 1.5em 0.5em 1.8em; }
h2 {
margin: 0; padding: 0;
text-align: center;
}
.porog2 { /* , */
margin: 1em 0 1em 3.5em;
width: 6.26em;
border: solid #333;
border-width: 0 0.13em;
height: 4.56em;
}
.porog3 { /* */
width: 3.07em;
border-right: 2px solid #333;
height: 4.56em;
}
.porog2 ol {
margin: 0 0 0 -3.13em;
padding: .2em 0 0 0; /* c */
list-style: none;
border: solid #333; /* , 4 4, 3- 3 */
border-width: 0 0.13em;
height: 4.063em; /* */
width: 9em; /* 3 */
overflow: visible;
position: relative;
}
.porog2.lad4 {
width: 6.26em;
margin: 1em 3em;
}
ol.lad0 { /* */
border-left-width: 0.4em;
margin-left: -3.13em;
height: 4.36em;
}
ol.lad2 { /* 1 */
margin-left: -2.87em;
height: 4.36em;
}
ol.lad4 li {
width: 12.26em;
}
ol.lad4 li.last { border-right: 0; }
ol.lad4 {
width: 12.26em;
margin-right: 3em
}
.porog2 li {
padding: 0;
border-top: 1px dotted #333;
height: .8em;
margin: 0 0 -1px;
*margin-bottom: -6px; /* IE 6,7 */
position: relative;
vertical-align:bottom; /* IE */
}
.porog2 span {
position: relative; /* IE */
line-height: 1.3em;
top: -.78em;
*top: -.87em; /* IE 6,7 */
left: -1em;
}
span big { /* */
font-size: 1.4em; /* */
line-height: .9em;
}
span small { /* */
position: relative;
top:-.3em;
font-size: .9em;
font-weight: bold;
}
/* */
span.lad1 { left: .8em }
span.lad2 { left: 3.8em }
span.lad3 { left: 7em }
span.lad4 { left: 10em; }

.barre { /* */
margin: 0 0 0 -.25em;
z-index: 10;
border: solid #999;
border-width: .05em 0 .05em .25em;
display: block;
white-space: nowrap;
width: 0.2em;
}
.barre.bolshoe { height: 5.4em; }
.s5 { height: 4.4em; }
.s4 { height: 3.6em; }
.s3 { height: 2.9em; }
.accord {
display: block;
border: 1px solid #eee;
width: auto;
padding: 1em;
margin: 1em;
}

* This source code was highlighted with Source Code Highlighter .

See an example .

Where did I get this idea ...

Thanks to all commentators of the first and second topic on this topic - it helped to understand.