Я пытаюсь создать некоторый CSS, который позволит мне сделать свой собственный индикатор прогресса.
Функция HTML5 <progress value="10" max="100"></progress>
будет работать, но я хочу сделать это сам.
Мой CSS определяет, что .progressbar
имеет ширину 10 .progressbar
и .progressbar
(я действительно должен переименовать это в .progressPiece
, но это может произойти позже).
.progressbar>div {
margin:0;
padding:0;
height:10px;
width:10px;
}
Для каждого раздела моего завершенного уровня прогресса я создал класс, который определяет, какое изображение использовать:
.start>div {
background: url("/images/images/pbStart.gif") right center no-repeat;
}
.startGlow>div {
background: url("/images/images/pbStartGlow.gif") right center no-repeat;
}
.chunk>div {
background: url("/images/images/pbChunk.gif") right center no-repeat;
}
.motion>div {
background: url("/images/images/pbMotion.gif") right center no-repeat;
}
.end>div {
background: url("/images/images/pbEnd.gif") right center no-repeat;
}
.endGlow>div {
background: url("/images/images/pbEndGlow.gif") right center no-repeat;
}
От взгляда на примеры я бы подумал, что следующие сегменты кода будут работать:
<div class="progressbar startGlow"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar end"></div>
<div class="progressbar start"></div>
<div class="progressbar motion"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar end"></div>
<div class="progressbar start"></div>
<div class="progressbar chunk"></div>
<div class="progressbar motion"></div>
<div class="progressbar chunk"></div>
<div class="progressbar end"></div>
<div class="progressbar start"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar motion"></div>
<div class="progressbar end"></div>
<div class="progressbar start"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar chunk"></div>
<div class="progressbar endGlow"></div>
Очевидно, что мой текст не производит вывод, который я хочу.
Все, что я вижу, - это несуществующие коробки, как показано в этом jsFiddle.
Почему это не работает?
ОБНОВЛЕНИЕ: Хотя это теперь решено, я использую это рабочее пространство для разработки этой же строки выполнения с использованием меньших jpeg-изображений.
>
но все ваши divs пусты. Удалите каждый >div
в вашем CSS.width
и height
.progressbar
до 100 пикселей.div
является элементом уровня блока, поэтому вам нужно float: left
ваш .progressbar
Рабочая скрипка:
Вы используете родительский селектор ">" в своем CSS, но в представленном HTML-документе нет родительских/дочерних отношений. Вы также используете DIV для отображения изображений, которые должны отображаться в одной строке. Они должны быть изменены на SPAN, поскольку DIV являются блочными элементами.
Здесь работает скрипка того, что вы пытаетесь добраться до
Вместо использования фоновых изображений я использовал тег img. Разметка разметки по умолчанию следующая:
<span class="progressbar startGlow">
<img src = "http://i.stack.imgur.com/t9NuV.gif">
</span>