variable width background on inline elements

N

Nathan

While I realize what I am trying to accomplish requires a lot of css, I
don't see it being fully implemented without JS. I have provided an
example from the Trac system that provides a progress meter. However I
want to accomplish the same thing but on elemnts on a web page where
the width is not defined, and the elements being effected are inline
like span tags.

My current thought on implentation:
I could use the offsetWidth, offsetHeight, offsetTop, offsetLeft on the
target inline element. Then dynamically create my structure in the same
place but use z-index to make sure it is positioned under the original
element. Does this sound workable or am I going down the wrong path?


<html>
<head>
<style>
.progress {float:left; border:1px solid #d7d7d7; width:40em;
max-width:80%}
.progress div {background: #bae0ba; height:1.2em}
</style>
</head>
<body>
<div class="progress">
<div style="width: 70%"></div>
</div>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,059
Latest member
cryptoseoagencies

Latest Threads

Top