• Страница 1 из 1
  • 1
Модератор форума: Admin, Cибиря4ка, Komoff, Diana  
Вид опросов некорректное отображение
Дата: Суббота, 25.02.2012, 21:42 |
Stels
Сержант
Группа: Проверенные
Сообщений: 26
Награды: 0
Репутация: 1
Статус: Offline


Добрый вечер, сегодня решил сделать новый вид опросов, за основу взял простенький вид и попробовал доработать его, вроде все получилось как хотел, но есть одна проблема полоса заполнения отображается не в соответствии с процентами
Вот собственно скрин:

Как видно проголосовало 62% а поле заполнено наполовину и того меньше, вот не знаю как исправить проблему, может поможете?

Вот код:

Прикрепления: 3075948.png (4.9 Kb)

 
Дата: Суббота, 25.02.2012, 22:34 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Stels,
Quote (Stels)
Как видно проголосовало 62% а поле заполнено наполовину и того меньше, вот не знаю как исправить проблему, может поможете?

Честно говоря, на скриншоте вообще не вижу полосу ))))
Возможно у блока полосы размер бо́льший чем размер родительского блока, по этому лишнее просто скрывается ...


 
Дата: Воскресенье, 26.02.2012, 00:05 |
Stels
Сержант
Группа: Проверенные
Сообщений: 26
Награды: 0
Репутация: 1
Статус: Offline


Quote (likbezz)
Честно говоря, на скриншоте вообще не вижу полосу ))))

Вот специально на белом сделал)

За гугл показывает 54% а полоса только на треть заполнена

Quote (likbezz)
Возможно у блока полосы размер бо́льший чем размер родительского блока, по этому лишнее просто скрывается ...

Да, наверно, так, размер фона, а точнее ширину я сам ставил (190px), а вот как сделать чтобы и под проценты подходило никак не разберусь

Прикрепления: 8692287.png (12.4 Kb)

 
Дата: Воскресенье, 26.02.2012, 00:51 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Stels,
Quote (Stels)
Вот специально на белом сделал)

))) Ну ты даёшь, лучше б ссылку на страницу оставил )))

Quote (Stels)
За гугл показывает 54% а полоса только на треть заполнена

Да, теперь видно несоответствие, причём серьёзное ...

Quote (Stels)
а вот как сделать чтобы и под проценты подходило никак не разберусь

Ссылочку всё же оставь ) посмотрю в реале что не так ...


 
Дата: Воскресенье, 26.02.2012, 12:00 |
Stels
Сержант
Группа: Проверенные
Сообщений: 26
Награды: 0
Репутация: 1
Статус: Offline


Quote (likbezz)
Ссылочку всё же оставь ) посмотрю в реале что не так

Хорошо, вот (справа, нижний блок)
Код этого опроса и стили в 1 посту под спойлером)


 
Дата: Воскресенье, 26.02.2012, 18:16 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Stels,
Quote (Stels)
Хорошо, вот (справа, нижний блок)
Код этого опроса и стили в 1 посту под спойлером)

Система высчитывает проценты от ширина «130» ...
Вот так правдоподобно (бордер и фон для наглядности)
Code
.cell_poll{float:none;width:190px;}
.answer{padding: 2px 0px 2px 0px;}
.answer div.progress{
display:block;
position:relative;
left:15px;
padding:0!important;height:18px!important;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border:1px solid #0F0;
background-color:#F00!important;
width:130px;
}
.answer div.progress div{
padding:0!important;
height:18px!important;
border:0px solid #000;
width:auto;
left:0;
}



...

Или компенсировать внутренним отступом:
Code
.cell_poll{float:none;width:190px;}
.answer{padding: 2px 0px 2px 0px;}
.answer div.progress{
display:block;
position:relative;
padding:0!important;
height:18px!important;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border:1px solid #0F0;
background-color:#F00!important;
}
.answer div.progress div{
padding-left:30px!important;
height:18px!important;
border:0px solid #000;
}

Но это не кроссбраузерно ... и немного некорректно ...


...

Ну и, конечно же, значение можно подправить скриптом )))) до соответствия - умножить на недостающий коэффициент.
Code
<script type="text/javascript">
$('div.progress div').each(function(){
    $(this).css('width',parseInt((parseInt($(this).css('width'))*1.46))+'px');
});
</script>

Кроссбраузерно )


...

Прикрепления: 4564642.png (3.3 Kb) · 0267145.png (1.8 Kb) · 3439591.png (1.8 Kb)

 
Дата: Воскресенье, 26.02.2012, 19:28 |
Stels
Сержант
Группа: Проверенные
Сообщений: 26
Награды: 0
Репутация: 1
Статус: Offline


Cпасибо, работает, сделал скриптом т.к это кроссбраузерно, а это для меня важно, коэффицент еще на 1.3 поменял, тот многоват вроде был, вообщем сейчас все впорядке как и хотел, еще раз спасибо smile

 
Дата: Воскресенье, 26.02.2012, 19:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Stels,
Quote (Stels)
коэффицент еще на 1.3 поменял, тот многоват вроде был

Как так “многоват”?
190/130 ≈ 1,4615
... biggrin


 
Дата: Воскресенье, 26.02.2012, 22:38 |
Stels
Сержант
Группа: Проверенные
Сообщений: 26
Награды: 0
Репутация: 1
Статус: Offline


Я на глаз смотрел, вроде много показалось, но не суть там разница невелика, главное понял как изменить))

 
Дата: Воскресенье, 26.02.2012, 23:47 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Stels,
Quote (Stels)
главное понял как изменить

Да, это главное )


 
Дата: Понедельник, 27.02.2012, 06:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (likbezz)
Как так “многоват”?
190/130 ≈ 1,4615

Не, соврал ))
Не «130», а «129».
Вот отсюда берутся цифры:


....
Так как высота таблицы 131, но у вложенной есть cellspacing= 1, следовательно, 100% == 129px;
Считаем - проверяем:
Quote (Info)
129/100=42/x;
x=129*42/100;
x=54,18;

... Правильно - высота картинки == 54px.
...

Прикрепления: 4979271.png (13.3 Kb)

 
Дата: Среда, 29.02.2012, 15:31 |
Stels
Сержант
Группа: Проверенные
Сообщений: 26
Награды: 0
Репутация: 1
Статус: Offline


Quote (likbezz)
Правильно - высота картинки == 54px

Буду знать smile


 
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия