> I tried but it doesn't seem like the percent filled in the bar graph
> changes.
>
> This markup is generated dynamically so want to be able to set a
> percentage and display the graph filled in by that percentage.
>
> <div class="graph">
> <div class="bar" style="width: 22%;">
> <span>22%<span>
> </div>
> </div>
>
Bill
sorry I am so late offering any ideas but I'll show it anyway.
I don't know what control you have over the generated code but instead of
trying to make the div appear inline you could do this with a couple of
basic images. One for a 'placeholder' and appears in the html, and one as
a background image that is treated like a sprite, the graph is displayed
by adjusting the position of the background image.
In the code below, the two images are "trans.gif" and "graph.gif", on the
code they are both simple gifs at 100x20 pixels, trans is fully
transparent and serves to give the graph its 'space', graph is solid white.
The basic css is embedded in a style block, you need to feed the inline
"background-position" with the value of the bar and the span for the text
value, the span has a negative margin applied to place the text over the
bar image.
As it stands, it needs the bar position fed in pixels, it should work in %
but it didn't first time round and I ran out of time sorry.
The sizes are fixed as far as display is concerned and will not scale with
the text and the 100 px sizing was just to simplify things, obviously it
can be juggled to suit.
For multiple graphs on one page, the inline background-position that is
generated for each means that they can all use the same images and css.
To test you will need to make the couple of images, I didn't have anywhere
to post it at short notice.
The code will take a strict xhtml 1.0 doctype but I cut it in case it
messes any email around.
<title> Page Title
</title>
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
<meta http-equiv="content-type" content="application/xhtml+xml;
charset=utf-8" />
<style type="text/css">
.graph{
background-image: url("graph.gif");
background-repeat: no-repeat;
background-color:yellow;
border:green 1px solid;
}
.graphtext{
margin-left:-95px;
margin-right: 70px;
vertical-align:top;
}
</style>
</head>
<body>
<div id="container">
<p> Lorem ipsum dolor sit amet consectetuer nunc sem eget diam
lobortis. Neque vitae eros enim semper amet Integer massa nulla In
interdum.
<img src="trans.gif" class="graph" style="background-position:
66px;" alt="" height="20" width="100" />
<span class="graphtext">
66%
</span> Id laoreet congue mauris est sed felis Praesent neque
convallis tellus. Nisl commodo a non et Curabitur Vestibulum Aenean montes
at orci. Tristique nibh orci dictum tristique scelerisque metus lacus
Maecenas at pellentesque. Lacinia orci dictumst Aenean nec.
</p>
</div>
</body>
</html>
best wishes
Duncan
--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
