Topic: bar graphs -- CSS

I have an assignment that's driving me nuts.

SHORT VERSION:
Does NN 6.0 really not support display:inline for divs?
I can't get it to work.

LONG VERSION:
I have to represent a bar graph in HTML, and the bar graph must be created dynamically (no fair making graphics ahead of time.) As an extra challenge to myself I've made a rule that it all must be done CSS positioning(no tables).

So, one of the things I've been thinking about is putting solid color gif images in divs and dynamically writing the height of the img with PHP (based on db...).
Then, each div would be given a style -- display:inline; margin-right:5px; -- so they'd all line up in a nice straight line. Add some text, I've made a bar graph.

Works great in IE, looks like shit in NN 6.0. I don't care about NN 4.x

Any advice?



[This message has been edited by mobrul (edited 12-13-2002).]

mobrul: Why do you need them to be inline? Why not float them up against each other? Vertcallly align them to the bottom and BINGO!! Or have I missed something vital?

___________________
Emps

FAQs: Emperor

^ my thoughts exactly.

My other thought being, why not make it a sideways bar graph (which are about as common) and you wouldn't have to worry about that issue at all =)



[This message has been edited by DL-44 (edited 12-13-2002).]

well, I tried that too...actually that was my first trial.
The problem is, floated elements seek the top of the page...and for whatever reason (maybe 'cuz they don't "take up space"??) vertical-align has zero effect.

At least that is the results of my tests...

[edit: I suppose I should clarify: if I use float, my graph is upside-down]
[edit: for DL, no go on the horizontal, boss wants vertical]

Mock up graph w/ float

[This message has been edited by mobrul (edited 12-13-2002).]

Got your message... I'll have to play around with it and see. I'll let you know if I come up with a solution.

. . : slicePuzzle

perplexing.

so far I can't come up with a method that NN likes either...

Just a thought though...using table to display a graph is perectly acceptable in my mind...it is tabular data after all.



[This message has been edited by DL-44 (edited 12-17-2002).]

For the life of me, I am not having any luck. However, I have a possibly acceptable work around. Why not just add a bit more work to the PHP and compute the tallest bar and then add a blank.gif above the shorter bars such that the total height of each of the smaller bars and their corresponding blank.gifs equal the height of the tallest? That will push the short ones down and they will bottom justify.

<div class='graph'>
<img src='images/blank.gif' width='40px' height='205px'>
<img src='images/red.gif' width='40px' height='205px'>
<p>2.05</p>
</div>

You what else would be very cool and that is to write a dhtml script that will build a bar graph. I don't know if you need to avoid scripting for your project. If not, then it could work quite nicely... after a little development of course

. . : slicePuzzle

Bugs, very nice.
I never did think about the negative space. I know that the tallest any of them could go is 500 px...PHP could do the subtraction...I dig it.
Brilliantly simple. I got so caught up in the problem I never stepped back to look at the bigger picture.

DHTML graphs and tables? I'll think about it. Seems like a lot of work.

Thank you all for trying. If you come up with a more elegant way of working this, I'd be interested in hearing about it. In the mean time, this will work beautifully.

mobrul
[edit: On further thought, the blank gif seems like a cheat...but there is no reason I can't add to the inline style of each div a padding-top that would equal the remaining space. I'll have to rework the top border (add it to the image instead of the div) but I think that'll be OK. Today is a happy day.]


[This message has been edited by mobrul (edited 12-17-2002).]

Cool. Good point about the blank.gif I guess I'm still used to the old days when that was the only way to get proper spacing to work in all cases.

I was thinking some more about making what you've got even slicker. Why do you even need to use red.gif? Couldn't you build the entire graph with CSS elements only? That way you could easily switch colors on the bars.