ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прогресс-бар с текстом
6 сообщений из 6, страница 1 из 1
Прогресс-бар с текстом
    #38671472
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Нужно нарисовать прогресс-бар в виде прямоугольника с заливкой части прямоугольника. Поверх прямоугольника должен быть текст.
Делаю так:
Код: html
1.
2.
3.
4.
<td>
	<span class="row">Строка-заголовок</span>
	<span class="gain"><div>&nbsp;</div><span class="row">Уровень сигнала 40%</span></span>
</td>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
span.row
{
	display: block;
}
span.gain
{
	border: 1px solid black;
	position: relative;
	display: block;
}
span.gain>div
{
	background-color: #cfc;
	height: 100%;
	width: 40%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}



При обновлении страницы я на секунду даже вижу, что страница отображается как мне нужно — текст поверх прогресс-бара.
Но затем страница перерисовывется и текст перекрывает заливку, как если бы фон текста был непрозрачным.

________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
17.06.2014, 11:40
| Ответить | Цитировать | Написать  
Прогресс-бар с текстом
    #38671506
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<style>
.40percent {
background: -moz-linear-gradient(0deg, rgb(255, 245, 186) 40%, rgb(255, 255, 255) 40%);
background: -webkit-linear-gradient(0deg, rgb(255, 245, 186) 40%, rgb(255, 255, 255) 40%);
background: -o-linear-gradient(0deg, rgb(255, 245, 186) 40%, rgb(255, 255, 255) 40%);
background: -ms-linear-gradient(0deg, rgb(255, 245, 186) 40%, rgb(255, 255, 255) 40%);
background: linear-gradient(90deg, rgb(255, 245, 186) 40%, rgb(255, 255, 255) 40%);
}
</style>
<div class="40percent">Уровень сигнала 40%</div>
...
Рейтинг: 0 / 0
17.06.2014, 12:03
| Ответить | Цитировать | Написать  
Прогресс-бар с текстом
    #38672213
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Я бы хотел без хаков.
Мне собственно непонятно только почему текст перекрывает div.
Если текст убрать в отдельный div и тоже спозиционировать его как absolute (но с более высоким z-index), тогда результат получается нормальный.
...
Рейтинг: 0 / 0
17.06.2014, 18:32
| Ответить | Цитировать | Написать  
Прогресс-бар с текстом
    #38672294
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Это не хаки, это прогрессбар, реализуемый посредством единственного дива, залитого градиентом, как альтернатива жонглированию тремя элементами.
...
Рейтинг: 0 / 0
17.06.2014, 19:12
| Ответить | Цитировать | Написать  
Прогресс-бар с текстом
    #38672719
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Alibek B.Я бы хотел без хаков.
Мне собственно непонятно только почему текст перекрывает div.
Если текст убрать в отдельный div и тоже спозиционировать его как absolute (но с более высоким z-index), тогда результат получается нормальный.

span.row надо выставить position: relative. Это стандартное правило прорисовки элементов. Сначала прорисовывают элементы стандартного потока (или как там они правильно зовутся), а потом позиционируемые. То есть элементы с position: absolute/relative; всегда будут прорисовываться поверх других.
...
Рейтинг: 0 / 0
18.06.2014, 11:31
| Ответить | Цитировать | Написать  
Прогресс-бар с текстом
    #38672733
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Вот пример рабочего прогрессбара за 5 минут :)
...
Рейтинг: 0 / 0
18.06.2014, 11:41
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прогресс-бар с текстом
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38672213&tid=1446987]:
 0ms
get settings:
 7ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 155ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 196ms
total:  438ms
созд. / загр.: 438ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]