This technique assumes you have Ken True’s modifications to his Saratoga-Wx templates installed and your ‘wxssgauges.php’ and the ‘gauges-ss-basic-inc.php’ scripts working correctly. Of course it also assumes you have a functioning installation of the latest version (2.2.x) of Mark Crossley’s Steel Series Gauges.
I created a widescreen ‘fluid’ display of the Steel Series Gauges while I was playing around with them a little. The widescreen view enables all of the gauges to be viewed horizontally in two rows at once if your browser window is wide enough. This display, after you set to widescreen on the lower left, illustrates the power of css. Change the size of the browser window by dragging an edge in or out and you’ll see what I mean.
If anyone is interested in doing this as well, I can post some code that might help you get there.
I do like that setup being as my goal is to have pages fit the screen no matter what width it is. I don’t know that much about working with css, but if this page is checked as HTML5, it fails due to some of the tables properties not being in the css. If you feel spunky, can you get this to pass?
The mods are fairly simple. First you need to modify wxssgauges.php to create what I called wxssgauges_fluid.php (to preserve your original script file.) There is a center style that’s needed to keep everything from piling up on the left. Here it is in context:
HTML5 has deprecated the tag, and it displays erratically in some modern browsers. To get around this problem when there isn’t a fixed width, i.e. it’s a ‘fluid’ layout, I’ve found that all browsers see negative widths as the full screen width. To center properly a width of 100% is needed, but it can’t be specified as 100% and must be specified in pixels–strange, right? That leads to this next bit of code, in context, that checks for a widescreen session and behaves appropriately depending upon what it finds:
which acts as a container that centers the gauge content. This style could be moved to an in line or external css style sheet rather than embedding like this.
That brings us to the next changes in wxssgauges.php which just modifies the included script’s name, again to preserve the original file:
<p> </p>
<?php
if(! file_exists($ssgDir."gauges-ss-fluid-inc.php")) {
print "<!-- Steel Series Gauges template (gauges-ss-fluid-inc.php) not found in $ssgDir. ".
"Using default HTML for gauges. -->\n";
gen_default_html($ssgDir);
} else {
include_once($ssgDir."gauges-ss-fluid-inc.php");
}
One last change is needed to wxssgauges.php, and that’s to close the new
we added:
?>
</div>
</div><!-- end main-copy -->
I would recommend saving your modified wxssgauges.php with a new filename, probably ‘wxssgauges_fluid.php’.
Next are the simpler changes to ‘gauges-ss-basic-inc.php’, again in context:
Start here in your quest. I would use version 2-2-x and then install Ken’s test page. I think you need to get it running before modifying anything. Properly set up, the Steel Series Gauges should now validate as HTML5. It will be a bit of work, but it’s worth it!
BTW, your page is seen as XHTML 1.0 Transitional by the validation site.
I have done the updates as suggested, but my site has many other customizations in the header, footer and menu bar, that the css (alignments, cellpadding, cell width, etc…) for the whole site would need to be revisited. Here is the test page and here is the result. This is a bit over my head. :?
BTW, your page is seen as XHTML 1.0 Transitional by the validation site.
Really? 8O [I get 32 errors](http://validator.w3.org/check?uri=http%3a%2f%2fwww.cavecountryweather.com%2fwxlivemac.php) #-o
That page is highly modified with a heading row above each gauge row. You can’t make that layout fluid unless you put the heading directly above each individual gauge, not a row of gauges. The gauges are labeled so the heading, while much easier to find and read, is redundant. Like I said, I think you should get your normal gauges page to validate before you try modifying it, but that’s not the topic of this thread.