Solved

bargraph behind text lines?

Posted on 2004-03-20
4
263 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:JamesNewton
  • 3
4 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 10641253
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10641261
>>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
 
LVL 2

Author Comment

by:JamesNewton
ID: 10642244
Cool! The zindex on the text had to be -1 rather than 1 but it works fine, and thank you!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10642251
You're welcome - and have a nice weekend :-)
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question