CODEWITHSUNDEEP
htmlcssprogress-bar
Courtney Stephenson
Courtney Stephenson

Reputation: 930

Vertical CSS Progress Bar

I am working on creating a progress meter that comes from the bottom up using only HTML and CSS. The problem I am facing is that the overlayed image doesn't line up where it belongs. Could someone please help me out?

Edit

Here is the code:

<h2>Fall Fest Candy Collection</h2>
<p>The Fall Fest candy collection has begun!  Follow along with the progress bar as we attempt to reach our goal of one million pieces of candy!</p>
<p>&nbsp;</p>
<div id="progress-bar">
<div id="progress-level" style="height: 79%; bottom: 0px; text-align: center;"></div>
</div>
<p style="margin-bottom: 15px; text-align: center;">79% collected</p>
<p> </p>

Upvotes: 2

Views: 5410

Answers (3)

Kyle
Kyle

Reputation: 67194

I fixed with:

<div id="progress-level" style="height: 7%; margin-top: 76px; text-align: center;"></div>

Changed the top margin to 76px. That was in Chrome's developer tools.

Upvotes: 1

Martin Zikmund
Martin Zikmund

Reputation: 39072

I would try using position:relative and bottom properties to move the #progress-level up, but I can't try it out now, I am on a mobile device ;-) .

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

  • On #progress-bar, set position: relative.
  • On #progress-level, remove margin-top: 133px and add bottom: 0. Then, change the height to a higher number, say 50%, so that you can see it working.

Upvotes: 4

Related Questions