Liquid layout with resizable sparkline graphs
in [CSS]
|
From: Eric Lindsay on 19 Apr 2008 16:42 I need to include some simple (sparkline style) graphs in a web page that will have a liquid layout. Some viewers will be changing the font size to suit their display (sizes range from 320 to 2560 pixels). I want the graphs to change size proportional to the font enlargement viewers use. I did this sort of thing once before at http://cyclonestudios.com.au/aboutus/projects.html where the little colour patches under each project show which design and building stages were handled, and the approximate project cost. This was just done with divs sized using em. e.g. <dt>1997 Proserpine Hospital</dt> <dd>Major Redevelopment in association with Peddle Thorp. <!-- $7.5m All stages --> <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em 0; border-color: #444 #444 #d6ba1c #444;"></div> <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em 0; border-color: #444 #444 #75fb78 #444;"></div> <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em 0; border-color: #444 #444 #faba75 #444;"></div> <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em 0; border-color: #444 #444 #54a4db #444;"></div> <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em 0; border-color: #444 #444 #6cf0de #444;"></div> </dd> Is anyone familiar with a better approach to simple resizable graphs than just styling divs (or spans probably in the new graphs) with em sizes? -- http://www.ericlindsay.com
From: Jonathan N. Little on 19 Apr 2008 17:31 Eric Lindsay wrote: > I need to include some simple (sparkline style) graphs in a web page > that will have a liquid layout. Some viewers will be changing the font > size to suit their display (sizes range from 320 to 2560 pixels). I want > the graphs to change size proportional to the font enlargement viewers > use. > > I did this sort of thing once before at > http://cyclonestudios.com.au/aboutus/projects.html > where the little colour patches under each project show which design and > building stages were handled, and the approximate project cost. This was > just done with divs sized using em. > > e.g. > <dt>1997 Proserpine Hospital</dt> > <dd>Major Redevelopment in association with Peddle Thorp. > <!-- > $7.5m > All stages > --> > <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em > 0; border-color: #444 #444 #d6ba1c #444;"></div> > <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em > 0; border-color: #444 #444 #75fb78 #444;"></div> > <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em > 0; border-color: #444 #444 #faba75 #444;"></div> > <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em > 0; border-color: #444 #444 #54a4db #444;"></div> > <div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em > 0; border-color: #444 #444 #6cf0de #444;"></div> > </dd> > > Is anyone familiar with a better approach to simple resizable graphs > than just styling divs (or spans probably in the new graphs) with em > sizes? > I would use 1-color images that stretch to whatever you need <img src="bar.gif" height="10" width="50" alt="50%"> <img src="bar.gif" height="10" width="23" alt="23%">... -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: dorayme on 19 Apr 2008 18:54 In article <NOwebmasterSPAM-F803BC.06424520042008(a)freenews.iinet.net.au>, Eric Lindsay <NOwebmasterSPAM(a)ericlindsay.com> wrote: > I need to include some simple (sparkline style) graphs in a web page > that will have a liquid layout. Some viewers will be changing the font > size to suit their display (sizes range from 320 to 2560 pixels). I want > the graphs to change size proportional to the font enlargement viewers > use. > > I did this sort of thing once before at > http://cyclonestudios.com.au/aboutus/projects.html > where the little colour patches under each project show which design and > building stages were handled, and the approximate project cost. This was > just done with divs sized using em. > > Is anyone familiar with a better approach to simple resizable graphs > than just styling divs (or spans probably in the new graphs) with em > sizes? You forgot to say what *you* found unsatisfactory about this approach. Is that not something relevant? I have some ideas that will give you a better result if you are concerned abut some particular problems. What are the problems that concern you? -- dorayme
From: dorayme on 19 Apr 2008 18:57 In article <7341d$480a607d$40cba7b2$10611(a)NAXS.COM>, "Jonathan N. Little" <lws4art(a)central.net> wrote: > > Is anyone familiar with a better approach to simple resizable graphs > > than just styling divs (or spans probably in the new graphs) with em > > sizes? > > > I would use 1-color images that stretch to whatever you need > > <img src="bar.gif" height="10" width="50" alt="50%"> > <img src="bar.gif" height="10" width="23" alt="23%">... OP's question was not about the particular example. -- dorayme
From: Jonathan N. Little on 19 Apr 2008 21:26 dorayme wrote: > In article <7341d$480a607d$40cba7b2$10611(a)NAXS.COM>, > "Jonathan N. Little" <lws4art(a)central.net> wrote: > >>> Is anyone familiar with a better approach to simple resizable graphs >>> than just styling divs (or spans probably in the new graphs) with em >>> sizes? >>> >> I would use 1-color images that stretch to whatever you need >> >> <img src="bar.gif" height="10" width="50" alt="50%"> >> <img src="bar.gif" height="10" width="23" alt="23%">... > > OP's question was not about the particular example. > My point is what is wrong with what is simple and works. A bar graph is a graphic, why not use a graphic? More options and can be very bandwidth friendly...just don't like the use of empty DIVs... -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
|
Next
|
Last
Pages: 1 2 3 4 Prev: help with css in Internet Explorer Next: Please Help Me Understand A Printer-Friendly CSS.... |