Multiple CSS class values

Question

I am trying to create some CSS that will allow me to make my own progress bar.

The HTML5 feature <progress value="10" max="100"></progress> would work, but I want to do this myself.

My CSS defines the .progressbar to be 10px wide and 10px high (I should really rename that to .progressPiece, but that can come later).

.progressbar>div {
  margin:0;
  padding:0;
  height:10px;
  width:10px;
}

For each section of my completed progressbar, I have created a class that defines what image to use:

.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;
}

From looking at examples, I would think the following code segments would work:

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

startGlow chunk chunk chunk end

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

start motion chunk chunk end

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

start chunk motion chunk end

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

start chunk chunk motion end

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

start chunk chunk chunk endGlow

Obviously, my text is not producing the output I want.

All I see are non-existent boxes, as shown in this jsFiddle.

Why doesn't this work?

UPDATE: Though this is now solved, I am using this workspace to develop this same progress bar using smaller jpeg images.

startGlow chunk chunk chunk end

start motion chunk chunk end

start chunk motion chunk end

start chunk chunk motion end

start chunk chunk chunk endGlow

Got it. The overall website is large. How can I make sure these css properties are narrowed down by limiting them to div tags? — user153923
– user153923, Commented Nov 27, 2013 at 19:58

myajouri · Accepted Answer · 2013-11-27 20:00:45Z

1

you're using the direct descendant operator > but all your divs are empty. Remove every >div in your CSS.
10x10px is way too small to show your images. Increase the width and height of .progressbar to 100px.
A div is a block-level element, so you need to float: left your .progressbar

Working fiddle:

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

answered Nov 27, 2013 at 20:00

myajouri

3,13421 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user153923 Over a year ago

That's beautiful! Thanks and have a great Thanksgiving!

Lloyd Banks · Accepted Answer · 2013-11-27 20:13:41Z

1

You're using the parent selector ">" in your CSS, but there are no parent / child relationships in the HTML you presented. You're also using DIVs to display images that should be shown on a single line. They need to be changed to SPANs since DIVs are block elements.

Here's a working fiddle of what you are trying to get to

Instead of using background images, I used the img tag. The default mark-up layout is the following:

<span class="progressbar startGlow">
    <img src = "https://i.sstatic.net/t9NuV.gif">
</span>

answered Nov 27, 2013 at 20:13

Lloyd Banks

36.9k58 gold badges172 silver badges264 bronze badges

Collectives™ on Stack Overflow

Multiple CSS class values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related