Excellent solution Barney! Same general concept IF, but much more elegantly and efficiently delivered.
Dan K -----Original Message----- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Barney Carroll Sent: Sunday, October 09, 2011 8:14 AM To: Dan Kaufman Cc: Colin (Sandy) Pittendrigh; css-d@lists.css-discuss.org Subject: Re: [css-d] dynamic CSS strategies None of the above: Use a class to determine the various layout conditions. Assuming some kind of inline templating engine: CSS: .navigation { width: 16%; } .navigationWide { width: 25%; } Template: <div class="navigation[ if(linkCount >= largeNumber){ print " navigationWide" } ]"> <ul> <li><a href="etc"> etc etc Keep all your CSS in one place, introduce CSS hooks from the backend depending on your various conditions. If your back-end isn't that flexible, DOM Javascript can provide. Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 On 9 October 2011 15:40, Dan Kaufman <d...@studiokaufman.com> wrote: > > One solution is to use your server-side programming to dynamically generate > the CSS file. This way you can control all sorts of things in your layout > and look-and-feel relative to your database queries. > > In your case, for your column of links, write an IF/ELSE statement based on > the record count. This code would be in the file that generates the CSS file > that is sent to the browser. Such as "site_styles.cfm or .php or .asp, or > ..." which generates site_styles.css > > IF #record count# > x > [css for one column width] > ELSE > [css for two columns] > > The downside to this approach is that your CSS file is regenerated and > transmitted with EVERY call from the browser. A workaround to "this > problem" would be to use inline CSS in the page that contains the link-list > column(s). This way you're not regenerating the entire CSS file, just the > particular code (selectors and rules) that pertain to a specific area of > your page. This, of course, generates the dreaded future maintenance > problem(s)--you now can't go to one place to maintain your CSS, it is now > distributed throughout the site code/pages. > > > Dan K > > > > -----Original Message----- > From: css-d-boun...@lists.css-discuss.org > [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Colin (Sandy) > Pittendrigh > Sent: Sunday, October 09, 2011 7:22 AM > To: css-d@lists.css-discuss.org > Subject: [css-d] dynamic CSS strategies > > This is a CSS discussion list. So programming issues are not on topic > here. > But if I keep my dynamic CSS question abstract enough I don't see why it > isn't a CSS issue as much as anything else. > > Let's say my content management system is currently using a three column > layout, where a left side column of links is usually defined as 16% of > available width. > However, if it turns out the current page has a larger than normal number > of navigation links, I could (somehow) set the navigation column width to > 25% so it could contain two vertical rows of clickable links, rather than > one vertical column. > > What is the best way to do this? > > My CMS codes could calculate the number of needed links before generating > any output, and then choose from any one of several hard-coded CSS files > depending on the total link count. Or I could manipulate the browser's CSS > on the fly with Javascript and the DOM tree (which used to be a > browser-sniffing nightmare, the last time I tried it). Are there any > alternate strategies I'm not aware of.....simply because I'm an amateur > hacker and not a well-educated professional? > > > > -- > /* Colin (Sandy) Pittendrigh >--oO0> > Have code will travel */ > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > 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/ > > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > 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/ > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] 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/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] 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/
