bargraph behind text lines?

How can I put a colored background behind a line of text with a width that is some number of pixels and not related to the width or character spacing of the text.

So, I have a list of file names and I want to add a sort of a bar graph that shows how big the file is, but I don't want to take up any space in the listing. I have a nice little yellow span with a width that follows the file size, but it shows up after the file name and not behind the file name.

html+=f.Name+"<span style='width:"+f.Size*scale+"px;color:red;background-color:yellow;height:3px;'></span><BR>";

If I do absolute position and the window is resized causeing something above the list to wrap, don't I have to recalculate all the absolute positions? I want the position to be 0,0 relative to the start of each file name.

browser compatibility would be nice but I'll accept an IE only answer.
LVL 2
JamesNewtonAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
seanpowellConnect With a Mentor Commented:
One way to do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical Centers</title>
<style>

#back
{
    position:absolute;
    height:20px;
    width:50px;
    background-color:red;
    z-index:-2;
}

#text
{
    position:relative;
    z-index:1;
}

</style>
</head>
<body>

<div id="text">
<div id="back"></div>
This text displays on top of the colored background
</div>

</body>
</html>
0
 
seanpowellCommented:
>>If I do absolute position and the window is resized causeing something above the list to wrap, don't I have to recalculate all the absolute positions?

In this case, the text div is positioned with relative, so the absolute position is in relation to the parent div - not the browser window...
0
 
JamesNewtonAuthor Commented:
Cool! The zindex on the text had to be -1 rather than 1 but it works fine, and thank you!
0
 
seanpowellCommented:
You're welcome - and have a nice weekend :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.