Topic: bar graphs -- CSS (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=10876" title="Pages that link to Topic: bar graphs -- CSS (Page 1 of 1)" rel="nofollow" >Topic: bar graphs -- CSS <span class="small">(Page 1 of 1)</span>\

 
mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-13-2002 21:00 Edit Quote

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).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 12-13-2002 21:12 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 12-13-2002 21:35 Edit Quote

^ 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).]

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-13-2002 21:40 Edit Quote

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).]

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

IP logged posted posted 12-17-2002 01:20 Edit Quote

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 12-17-2002 03:59 Edit Quote

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).]

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

IP logged posted posted 12-17-2002 09:35 Edit Quote

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

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-17-2002 14:52 Edit Quote

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).]

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

IP logged posted posted 12-17-2002 15:21 Edit Quote

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.

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

IP logged posted posted 12-17-2002 17:27 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu