Несколько значений класса CSS

0

Я пытаюсь создать некоторый 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>

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

<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>

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

<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>

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

<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>

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

<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>

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

Очевидно, что мой текст не производит вывод, который я хочу.

Все, что я вижу, - это несуществующие коробки, как показано в этом jsFiddle.

Почему это не работает?

ОБНОВЛЕНИЕ: Хотя это теперь решено, я использую это рабочее пространство для разработки этой же строки выполнения с использованием меньших jpeg-изображений.

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

Изображение 174551Изображение 174551Изображение 174551Изображение 174551Изображение 174551

  • 1
    Все ваши селекторы CSS должны удалить '> div'
  • 0
    Понял. Общий сайт большой. Как я могу убедиться, что эти свойства css сужены, ограничивая их тегами div?
Показать ещё 1 комментарий
Теги:

2 ответа

1
Лучший ответ
  1. вы используете оператор прямого потомка > но все ваши divs пусты. Удалите каждый >div в вашем CSS.
  2. 10x10px слишком мал, чтобы показывать ваши изображения. Увеличьте width и height .progressbar до 100 пикселей.
  3. Элемент div является элементом уровня блока, поэтому вам нужно float: left ваш .progressbar

Рабочая скрипка:

http://jsfiddle.net/myajouri/mR2uS/2/

  • 0
    Это красиво! Спасибо и хорошего Дня Благодарения!
1

Вы используете родительский селектор ">" в своем CSS, но в представленном HTML-документе нет родительских/дочерних отношений. Вы также используете DIV для отображения изображений, которые должны отображаться в одной строке. Они должны быть изменены на SPAN, поскольку DIV являются блочными элементами.

Здесь работает скрипка того, что вы пытаетесь добраться до

Вместо использования фоновых изображений я использовал тег img. Разметка разметки по умолчанию следующая:

<span class="progressbar startGlow">
    <img src = "http://i.stack.imgur.com/t9NuV.gif">
</span>
  • 0
    Спасибо за идею SPAN!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню