.wpal

Надо сделать вот такой прогресс-бар. При этом просто со стороны верстки, так и чтобы изменения процентов не вело к заумному программированию.

• 
• progress

Изобретать велосипед тут не надо.

Всего сделать тэги для углов и HR в качестве указателя прогресса. Код получается таким:

<style>
  #progress-bar{ width:234px; position:relative; padding:0;}
  #progress-bar dd{ background:transparent url(/img/button.gif) no-repeat scroll 100% 0pt; 
      text-align:center; height:26px; margin:0; }
  #progress-bar dd hr{ 
      margin:0; margin-top:1px; height:24px; border: none 0px; 
      position:absolute; 
      background:transparent url(/img/profil_load.gif) top left; z-index: 0;
  }
  #progress-bar dd i{ display:block; height:26px; z-index:2; position:relative; 
      background:transparent url(/img/profil_load1.gif) no-repeat scroll 0pt 1px;} 
  #progress-bar dd i.l_0{ background:none;}
  #progress-bar dd b{ display:block; height:26px; }
  #progress-bar dd b.r_100{ 
      background:transparent url(/img/profil_load.gif) no-repeat scroll 100% -26px; }
</style>
  <dl id='progress-bar'>
     <dd><hr style="width:50%"><i class="l_100"><b class="r_100">50%</b></i></dd>
  </dl>

Как же это работает? Если процент =0, то для угла i срабатывает правило #progress-bar dd i.l_0 и не показывается закрашеный уголок.

Если 100%, то вместе с правилом #progress-bar dd i.l_100 работает и #progress-bar dd b.r_100.

Указатель HR рассползается в зависимости от процента. При этом он имеет меньший z-index и всегда показывается на фоне углов и подписи процентов.

Благодаря этому имея шаблон

<dl id='progress-bar'>
  <dd>
      <hr style="width:{procent}%">
      <i class="l_{procent}">
          <b class="r_{procent}">{procent}%</b>
      </i>
  </dd>
</dl>

на выходе после преобразования серверной частью будем иметь правильные указания процента. Это проще, чем делать какие-то манипуляции в CSS, считать количество пикселей, чтобы указать длину прогресс-бара и т.д.

Покажу этот код уже с указанием разных процентов.

1. 25%.

Код HTML:

<dl id='progress-bar'>
    <dd><hr style="width:25%"><i class="l_25"><b class="r_25">25%</b></i></dd>
</dl>

Имеем на выходе:

2. 50%.

Код HTML:

<dl id='progress-bar'>
    <dd><hr style="width:50%"><i class="l_50"><b class="r_50">50%</b></i></dd>
</dl>

Имеем на выходе:

3. 0%.

Код HTML:

<dl id='progress-bar'>
    <dd><hr style="width:0%"><i class="l_0"><b class="r_0">0%</b></i></dd>
</dl>

Имеем на выходе:

4. 100%.

Код HTML:

<dl id='progress-bar'>
    <dd><hr style="width:100%"><i class="l_100"><b class="r_100">100%</b></i></dd>
</dl>

Имеем на выходе:

Остальное – дело техники. Насколько я знаю, то это ещё под ослик надо покрутить. Если надо попробывать, то тут можно менять проценты.