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.