[Ликбез]
Форма входа
Логин:
Пароль:
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Если вы пришли за помощью, то Вам сюда... » Вид опросов некорректное отображение
Вид опросов некорректное отображение
[1] Stels [25.02.2012, 21:42]
Добрый вечер, сегодня решил сделать новый вид опросов, за основу взял простенький вид и попробовал доработать его, вроде все получилось как хотел, но есть одна проблема полоса заполнения отображается не в соответствии с процентами
Вот собственно скрин:

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

Вот код:
Прикрепления: 3075948.png (4.9 Kb)
[2] likbezz [25.02.2012, 22:34]
Stels,
Quote (Stels)
Как видно проголосовало 62% а поле заполнено наполовину и того меньше, вот не знаю как исправить проблему, может поможете?

Честно говоря, на скриншоте вообще не вижу полосу ))))
Возможно у блока полосы размер бо́льший чем размер родительского блока, по этому лишнее просто скрывается ...
[3] Stels [26.02.2012, 00:05]
Quote (likbezz)
Честно говоря, на скриншоте вообще не вижу полосу ))))

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

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

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

Да, наверно, так, размер фона, а точнее ширину я сам ставил (190px), а вот как сделать чтобы и под проценты подходило никак не разберусь
Прикрепления: 8692287.png (12.4 Kb)
[4] likbezz [26.02.2012, 00:51]
Stels,
Quote (Stels)
Вот специально на белом сделал)

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

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

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

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

Ссылочку всё же оставь ) посмотрю в реале что не так ...
[5] Stels [26.02.2012, 12:00]
Quote (likbezz)
Ссылочку всё же оставь ) посмотрю в реале что не так

Хорошо, вот (справа, нижний блок)
Код этого опроса и стили в 1 посту под спойлером)
[6] likbezz [26.02.2012, 18:16]
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)
[7] Stels [26.02.2012, 19:28]
Cпасибо, работает, сделал скриптом т.к это кроссбраузерно, а это для меня важно, коэффицент еще на 1.3 поменял, тот многоват вроде был, вообщем сейчас все впорядке как и хотел, еще раз спасибо smile
[8] likbezz [26.02.2012, 19:40]
Stels,
Quote (Stels)
коэффицент еще на 1.3 поменял, тот многоват вроде был

Как так “многоват”?
190/130 ≈ 1,4615
... biggrin
[9] Stels [26.02.2012, 22:38]
Я на глаз смотрел, вроде много показалось, но не суть там разница невелика, главное понял как изменить))
[10] likbezz [26.02.2012, 23:47]
Stels,
Quote (Stels)
главное понял как изменить

Да, это главное )
[11] likbezz [27.02.2012, 06:40]
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)
[12] Stels [29.02.2012, 15:31]
Quote (likbezz)
Правильно - высота картинки == 54px

Буду знать smile
Полная версия сайта