Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прогресс-бар с текстом / 6 сообщений из 6, страница 1 из 1
17.06.2014, 11:40
    #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, 12:03
    #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, 18:32
    #38672213
Alibek B
Alibek B
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прогресс-бар с текстом
Я бы хотел без хаков.
Мне собственно непонятно только почему текст перекрывает div.
Если текст убрать в отдельный div и тоже спозиционировать его как absolute (но с более высоким z-index), тогда результат получается нормальный.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.06.2014, 19:12
    #38672294
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прогресс-бар с текстом
Это не хаки, это прогрессбар, реализуемый посредством единственного дива, залитого градиентом, как альтернатива жонглированию тремя элементами.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.06.2014, 11:31
    #38672719
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Прогресс-бар с текстом
Alibek B.Я бы хотел без хаков.
Мне собственно непонятно только почему текст перекрывает div.
Если текст убрать в отдельный div и тоже спозиционировать его как absolute (но с более высоким z-index), тогда результат получается нормальный.

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


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