Hey there, I've got a little issue I could use some help with.
So, I've created a progress bar for my portfolio website, but there's a small hiccup.
The #ability div is causing some trouble - when I adjust the width property to 1%-3%, it ends up overlapping the #bar div. I really want it to go underneath instead. It's a bit hard to explain.
Currently, the width property is set at 84%. If you can change it to 1%-3%, take a look at the link below to see the effect I'm aiming for:
http://codepen.io/DocRow10/pen/pgRXdv
<html>
<head>
<title>Test Bars</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="bar">
<div id="nil">
<div id="ability">
</div>
</div>
</div>
</body>
</html>
CSS
#bar {
width: 400px;
height: 55px;
background-color: aquamarine;
border: 2px solid black;
border-radius: 10px;
}
#nil {
background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */
width: 100%;
height: 100%;
border-radius: 7.5px;
float: right;
}
#ability {
width: 84%;
height: 100%;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , lime); /* Standard syntax */
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 7.5px;
border-top-left-radius: 7.5px;
/* border-radius: 7.5px; */
}
Thanks a bunch.