How can I insert the skill name inside the progress bar? - html

Question

I am working on my resume and I want the skill name inside the progress bar, and not above. But I dont get it. Thx
this is the web: http://working.virgiliodelavega.com/
<span class="skills-each">Illustrator</span>
<div class="progress-bar blue">
<span style="width: 90%"></span>
</div>
.skills-title {
font-size: 1em;
}
.skills-each {
font-size: .8em;
}
.progress-bar {
background-color: #727e7f;
height: 25px;
padding: 3px;
}
.progress-bar span {
display: inline-block;
height: 100%;
}
.blue span {
background-color: #34495e;
}
.red span {
background-color: #e74c3c;
}

Answer 1

I would recommend a change in markup. Using lists is a lot cleaner than divs/spans.
http://codepen.io/cimmanon/pen/Hikxp
ul.skills {
padding: 0;
}
ul.skills li {
background-color: #727e7f;
position: relative;
line-height: 2em;
margin: 1em 0;
padding: 0 .5em;
position: relative;
color: white;
}
ul.skills li span {
position: relative;
z-index: 10;
font-size: .8em;
}
ul.skills li:after {
position: absolute;
left: 3px;
top: 3px;
bottom: 3px;
content: '';
}
ul.skills li.seven:after {
width: 70%;
}
ul.skills li.eight:after {
width: 80%;
}
ul.skills li.nine:after {
width: 90%;
}
ul.skills li.ten:after {
right: 3px;
}
ul.skills.graphic li:after {
background-color: #34495e;
}
ul.skills.web li:after {
background-color: #e74c3c;
}
<h1>Graphic Skills</h1>
<ul class="skills graphic">
<li class="eight"><span>Illustrator</span></li>
<li class="ten"><span>Photoshop</span></li>
<li class="nine"><span>Indesign</span></li>
</ul>
<h1>Web Development</h1>
<ul class="skills web">
<li class="seven"><span>Illustrator</span></li>
<li class="eight"><span>Photoshop</span></li>
<li class="nine"><span>Indesign</span></li>
</ul>

Answer 2

hi you can try this way if you want
html
<span class="skillEachWrap"> <span class="skills-each">Illustrator</span></span>
<div class="progress-bar blue">
<span style="width: 90%"></span>
</div>
css
.skillEachWrap {
float:left;
position:relative;
}
.skills-each {
font-size: .8em;
position:absolute;
top:7px;
left:10px;
}
working demo hope this help you.....

Answer 3

You can use position:absolute to place the text on top of your progress bar. Then use line-height:25px to center the text vertically within the bar. I also recommend you give you bar a class and not just target it as span since we have multiple children in .progress-bar now.
jsFiddle
HTML
<div class="progress-bar blue">
<span class="bar" style="width: 80%"></span>
<span class="name">Photoshop</span>
</div>
CSS
.progress-bar {
background-color: #727e7f;
height: 25px;
padding: 3px;
position:relative;
}
.progress-bar .bar {
display: inline-block;
height: 100%;
}
.progress-bar.blue .bar {
background-color: #34495e;
}
.progress-bar .name {
color:#FFF;
position:absolute;
left:10px;
line-height:25px;
}