within index.html, have created following div, located within center tag.
<div class="container"> <div class="bar"> <span class="bar-fill"></span> </div> </div>
this looks on page: [progress bar image]1
i blue bar, positioned left of container.
below css:
/* progress bar */ .container { width: 400px; } .bar { width: 100%; background: #eee; padding: 3px; border-radius: 3px; box-shadow: inset 0px 1px 3px rgba(0,0,0,.2); } .bar-fill { height: 20px; display: block; background: cornflowerblue; width: 80%; border-radius: 3px; }
once again, blue bar (div labelled bar or bar fill) positioned left inside container.
thanks.
simply add margin-left: 0px;
.bar-fill
.container { width: 400px; } .bar { width: 100%; background: #eee; padding: 3px; border-radius: 3px; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2); } .bar-fill { height: 20px; display: block; margin-left: 0px; background: cornflowerblue; width: 80%; border-radius: 3px; }
<div class="container"> <div class="bar"> <span class="bar-fill"></span> </div> </div>
Comments
Post a Comment