Полоса прогресса

ListOFF · August 14, 2012

Решил выполнить упражнение на сайте http://htmlbook.ru/practical/indikator-vypolneniya . В принципе, решение автора задачи мне ясно. Но я хочу понять свою ошибку.

Далее привожу написанный мной код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Полоса прогресса</title>
	<style type="text/css">

		.time {
			border: solid 1px #000000;
			width: 250px;
			position: relative;
		}

		.leftnum, .rightnum {
			position: absolute;
			height: 100%;
			top: 0;
		}

		.rightnum {
			right: 0;
			background: #ffffff;
		}

		.leftnum {
			left: 0;
			width: 50%;
			background: #555555;
		}

		.progress {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			text-align: center;
		}
	</style>
</head>

<body>

<div class="time">
	<div class="leftnum">0</div>
	<div class="rightnum">5</div>
	<div class="progress">50%</div>
</div>

</body>
</html>

В итоге в браузере появляется div с нулевой высотой.

Понятно, что свойство position выводит слой из потока, но ведь в данном случае слой привязан к системе координат другого слоя и сам не пустой. Почему в таком случае рамка первого div сжимается, а не обрамляет вложенные div?

wwt · August 14, 2012

Задать высоту .time

ListOFF · August 14, 2012

Задать высоту .time

Высоту можно задать, но вообще-то она определяется высотой контента. Контент есть, почему он выходит за пределы слоя?

wwt · August 14, 2012

Во-первых у вас ошибка:

.progress {

position: absolute;

left: 0;

right: 0;

width: 100%;

height: 100%;

text-align: center;

}

А вовторых у вас контент находится в абсолютно позиционированных потомках. Как вариант можно пойти на хитрость и добавить неразрывный пробел в time, но это больше хак чем верная верстка ))

http://jsfiddle.net/spYCj/1/

ну или добавить его через :before, но это будет не кроссбраузерно.

http://jsfiddle.net/spYCj/2/

ишо мона так если не мудрить с позиционированием особо

http://jsfiddle.net/spYCj/3/

Edited August 14, 2012 by wwt

ListOFF · August 15, 2012

Спасибо за ответ. У меня несколько вопросов.

По этому варианту http://jsfiddle.net/spYCj/3/ . Класс .progress описывается так:

.progress {
     position: absolute;
     left: 0;
     top: 0;
     width: 50%;
     height:100%;        
     background: #555555;
     z-index:-1;
}

Если убрать свойства position и связанные с ним left и top, фон полосы прогресса исчезнет. Почему? Вложенный слой остается, фон тоже. Но полоса тем не менее становится полностью белой.

Еще один вопрос. Почему для того, чтобы div class="time" не сжимался по высоте до нуля, нужно непосредственно в него засунуть текст?

Затем. Слои с float встают слева и справа без использования свойства position. Я попробовал сделать следующее: убрал это свойство у всех слоев и z-index у .progress. Получилось так: http://jsfiddle.net/spYCj/5/ . Почему .progress перестал быть виден на странице? Я предполагал, что он должен сдвинуться влево из-за того, что у .leftnum установлено обтекание. но исчез совсем.

Sign In

Полоса прогресса

Question

ListOFF

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

ListOFF

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

ListOFF

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information