Продолжаем разработку записи аккордов в HTML. В камментах предыдущего топика selenit предложил оптимизированный вариант(1,2), где кода еще меньше.
Для ознакомления с темой подробно, почитайте предыдущий топик.
Код переработали, теперь вместо 4 списков используется 1 на котором, как на струнах все держиться.
Метка & bull; щаменена на более крупный сипвол из unicode & #9679;
При реализации предложеной selenit удалось уменьшить число кода, однако пришлось понести потери. В частности некоректная печать в Opera, IE — акорды разлезаются. Как решить пока не придумал.
При масштабировании страницы в IE смещаются цифры, обозначающие номера пальцев.
Вариант с корректной печатью можно увидеть в предыдущией версии кода.
Применительно ко всем версиям: вид аккорда зависит от размеров шрифтов, т.к. для метки используется шрифтовой символ, то и с измнением шрифта или его размера необходимо поменять параметры в CSS для корректного отображения.
Код HTML и CSS для оформления аккорда.
HTML для нескольких аккордов, демонстрация большого и малого баррэ.
<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.Посмотреть пример.
CSS код:
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.Посмотреть пример.
Откуда у меня эта идея появилась...
Спасибо всем коментаторам первого и второго топика по этой теме — помогло разобраться.
