Poll Graphics

**Whatknows** · Oct 7, 2003 18:57

Is there a using CSS in which to create a line?

I am creating a little function that shows an individual the completion level of thier project in a percent (i.e., 34% done) and in my non-CSS days I took that number and had a 1 pixel image repeated 34 (or however many) times.

I would love to not have to use a picture and am hoping that CSS has a solution. Does anyone have any ideas?

Thanks in advance,
whatknows

**beetle** · Oct 7, 2003 19:36

Shoot, even "back then" you didn't need to repeat it

<img src="pixel.gif" height="5" width="34">

Nowadays, I'd use another element

d.bar {
background: color image(image/path.gif) repeat-x;
height: 5px;
}

<div class="bar" style="width:34px"> </div>

Or something like that.

**S7even** · Oct 7, 2003 19:57

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
#container {
position: relative;
width: 200px;
height: 20px;
background: yellow;
}
#bar {
width: 34%;
height: 20px;
background: red;
}
#percent {
position: absolute;
top: 0;
left: 5px;
font: bold 12px/20px Arial, sans-serif;
vertical-align: center;
}
</style>
</head>
<body>
<div id="container"><div id="bar"></div><div id="percent">34% completed</div></div></div>
</body>
</html>

If you want to do the same thing in a more complicated way

**beetle** · Oct 7, 2003 20:06

Ya - this can definitely be done any of several different ways.

**Ian Glass** · Oct 7, 2003 20:19

Nothin' wrong with using

Code:

<img src="bar.png" alt=" " style="width: _PERCENT_" /><br />
_PERCENT_ Complete

or something like that in my mind. I wouldn't use a <div>, since it's a bit of a semantic abuse, but as these things go that's small potatoes, I guess. :-)

~~Ian

**beetle** · Oct 7, 2003 20:44

Agreed.

**Ian Glass** · Oct 7, 2003 21:20

2nd thought...

What's probably wanting something that can be put out by a server script as it's processing and not necessarily need to be altered by a client-side script, maybe?

Just postulating here, but you could probably send out a main HTML page that says "Thanks and we're processing it now," or whatever. Then in a linked CSS file, just redefine the element. Uh, assuming that the status bar is id="status":

Code:

#status { width: 0%; }
/*do some processing*/

#status { width: 5%; }
/*do some processing*/

#status { width: 10%; }
/*do some processing*/

#status { width: 15%; }
/*etc.*/

You might even update a written number in browsers that support generated content with something like:

Code:

#status:before { display: block; text-align: center; content: "0% Complete"; }
/*do some processing*/

#status:before { content: "5% Complete"; }
/*do some processing*/

#status:before { content: "10% Complete"; }
/*etc.*/

Don't know if this it's really practical. Keep in mind also that CSS files can be cached, so if this is something a person might do more than once, they might think the processing's done when it isn't. If that's a big deal, you might consider using a unique identifier for each process, maybe? :-)

~~Ian

User Tag List

Thread: Poll Graphics

Thread Tools

Display

Poll Graphics

Bookmarks

Bookmarks

Posting Permissions