Most excellent! Hopefully, I can think of something cool to do with this soon…

Perhaps you should use a definition list for this instead of two UL’s. The reason being that it’s currently not accessible. Plus, if no styles are applied, depending on the users’ browser preferences, it will be unintelligible, because the labels and values are disconnected.

Here is the modified code for an example I worked up of this…

<style>
#vertgraph {
width: 378px;
height: 150px;
position: relative;
background-color: #eeeeee;
border: 4px solid #999999;
font-family: &#8220;Lucida Grande&#8221;, Verdana, Arial;
}
#vertgraph dl dd {
position: absolute;
width: 28px;
height: 103px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background-image: url(&#8221;/images/css_graphs/colorbar.jpg&#8221;) no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 1.5em;
}

#vertgraph dl dt {
position: absolute;
width: 48px;
height: 25px;
bottom: 0px;
padding: 0 !important;
margin: 0 !important;
text-align: center;
color: #444444;
font-size: 0.8em;
}
#vertgraph dl dd.gouda { left: 24px; background-color: #ce494a; background-position: -0px bottom !important; }
#vertgraph dl dt.gouda { left: 14px; background-position: -0px bottom !important; }
#vertgraph dl dd.havarti { left: 99px; background-color: #efba29; background-position: -28px bottom !important; }
#vertgraph dl dt.havarti { left: 89px; background-position: -28px bottom !important; }
#vertgraph dl dd.provolone { left: 174px; background-color: #efe708; background-position: -56px bottom !important; }
#vertgraph dl dt.provolone { left: 164px; background-position: -56px bottom !important; }
#vertgraph dl dd.gjeitøst { left: 249px; background-color: #5a7dd6; background-position: -84px bottom !important; }
#vertgraph dl dt.gjeitøst { left: 239px; background-position: -84px bottom !important; }
#vertgraph dl dd.stilton { left: 324px; background-color: #73a25a; background-position: -112px bottom !important; }
#vertgraph dl dt.stilton { left: 314px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
<dl>
<dt class="gouda">Gouda</dt>
<dd class="gouda" style="height: 24px;" title="24">24</dd>
<dt class="havarti">Havarti</dt>
<dd class="havarti" style="height: 9px;" title="9">&nbsp;</dd>
<dt class="provolone">Provolone</dt>
<dd class="provolone" style="height: 81px;" title="81">81</dd>
<dt class="gjeitøst">Gjeitøst</dt>
<dd class="gjeitøst" style="height: 57px;" title="57">57</dd>
<dt class="stilton">Stilton</dt>
<dd class="stilton" style="height: 42px;" title="42">42</dd>
</dl>
</div>

I would also consider outputting the text of the bars that are too small, and then classing it’s dd something like, “hidevalue”, and then styling it with a negative letter-spacing, or some other favorite text-hiding technique.

This would also enhance accessibility.

P.s. Did you notice that using a dl also dropped the charater-count/lines-of-code as opposed to the two UL’s? :)

Great graphs!

It’s Geitost, not Gjeitøst :-)

It’s great that there are so many Norwegian Ruby programmers!

I think every one of them wrote today to tell me that I spelled it wrong.

At any rate, it’s good stuff! Go try some!

But “Gjeitøst” just looks so much better, like “SchjnøøveltÃ¥rt”! Tastes terrible though. Geitost, lutefisk, smalahove and knekkebrød.

As for the graphs; very nice!

just trying out dvorak

is thereany way round the C,X,V keys being dispersed around the keyboard ?

Mac OS X has a setting to keep the QWERTY keys when you use the command key.

Look under the International control panel for “Dvorak – QWERTY Command Keys.”

Please can you help me? I tried this plugin for Ruby on Rails, but it isnt go.

I include in my QuestionHelper:

module QuestionsHelper include CSSGraphs end

And in View:

<%= bar_graph [‘Gouda’, 24], [‘Stilton’, 42] %>

But its write error:

undefined method `bar_graph’ for #<#:0×3a9f458>

Please help me. Thanks!!

Pitrsonek I had the same error, just reboot the webrick°mongrel server… I don´t have the undefined method ‘bar_graph’ error instead I got wrong number of arguments (5 for 1) anyone could please help me?

The error is:

<%= bar_graph [‘Gouda’, 24], [‘Stilton’, 42] %>

ERROR -> Wrong number of arguments

The solution:

<%= bar_graph [[‘Gouda’, 24], [‘Stilton’, 42]] %>

Regards