Flutterby™! : Basic free CSS layouts 2009-03-25 19:08:24.264898+00

Basic free CSS layouts

2009-03-25 19:08:24.264898+00 by Dan Lyke 11 comments

When I last revamped the Flutterby.com CSS I learned everything about the various glitches and incompatibilities in all the browsers to provide pixel perfect positioning to freakin' everything. I've forgotten all that. Last night I wrote a bunch of Perl to get Flutterby.net off of MediaWiki and into static files, so it'd serve faster. I want some stupid simple CSS to:

Give me a side-bar for "what links to this page", and probably some basic high level nav stuff (ie: top page, a few categories).
Give me a top bar of "subsections in this page".
Give me floating pictures with captions.

And I want this whole process to be quick and dead simple. That last one seems to be the hardest, I can easily steal some floating column code for the first two. I can add additional nested <div> s if I have to, but I'd really rather just do this with a couple of <div> s with class names. Any leads? Do I need to just buy Dori and Tom's new book?

The important bit here is "minimal cognitive load". If I can spend less time tweaking my Perl than I have writing this entry, that'd be good.

Update: For #3, I hacked the Perl script to insert a div with the width of the picture. Ew. Yuck. CSS sucks. I should have just used tables. But it worked.

<BODY> blah blah blah <DIV CLASS="img"> <IMG ... > <P>caption</P> </DIV> blah blah blah <DIV CLASS="sidebar"> blah blah blah </DIV> <BODY>

DIV.sidebar { position: absolute; left: 0px; /* adjust to taste */ top: 1px; width: 280px; /* adjust */ }

Basically, you squeeze in the content margins to take account of the sidebars (for instance, on blog, the main content has left and right margins of 220px and 180px respectively), then absolutely position the sidebars.

look at the YUI/blueprint libraries. I've started using them instead of handcoding when I'm in a pinch. I wrote a set of css libraries for one of the "work" sites rgbagov.com. Or my personal favorite, glish.com by Eric Costello, formerly of Flickr & GNE

I've stayed away from pure CSS as in spc576's examples. I love tables. nested tables, recursively nested nested tables.. (actually I don't) but what I do like is using as little CSS as possible, but CSS is always preferable to JavaScript. :)

Thanks, I think I've got something I'm okay with for starters. The big issue was the floating captioned pictures, and I think there's just no way to do that without coding the image width in a div element in the HTML.

I like using CSS because it makes the HTML structure of the page much simpler. Granted, there are a few things that <TABLE>s can do that can't be done in CSS (full height cells being one example) but overall, I find CSS more flexible (on my blog, the main content appears first in the source code, with the left and right sidebars appearing at the bottom of the page, which is not something you can do with a <TABLE>, and if Amazon or Twitter are slow to respond, so what? The primary content is already loaded and visible).

So much of my interface work is dynamically changing screens that naturally has huge reams of table-like data: this image is a good example. note: that's Guyanaese dollars.. 204:1 GYD:US..

I have wandered into the world of LAMP as a means of dealing with my home automation and meteorology project. Having no other need for this paradigm, I don't want to learn PHP, Apache, the innards of SQL, XML or CSS. But rather to cobble together modules and functionality to eventually provide a high information content display. Thanks for the tip on Tom and Dori's new CSS book, it looks like what I need for the CSS end of this. Amazon prime to the rescue.

I think table data is appropriately put in tables: in Meuon's image, the purchase history, the statistics, even the notification all look like tabular data (although an argument could be made for a <dl> (definition list) for the latter two).

What torques me is that there are a number of places where CSS is just broken by design (and don't even get me started on "em"), and forces far more of the structure of the data to be pushed back into the HTML than it should. They should have known better, and didn't. But I'll file that rant with my OpenID one...

m, I'm way interested in whatever you're doing with meteorology. We picked up most of a Maximum weather station for a few bucks at a garage sale as a first start for just getting something up there, although I'm reluctant to spend a hundred and twenty five more for the missing rain dump sensor, so I may have to try to reverse engineer the cup capacity on that and build my own.

Yeah, no data logging, just big shiny brass dials, but at least it's something on the wall...

Dan, I mentioned a way back that in the 80's I had done the software data logging for a group of air pollution trailers which was an diversion from my multidisciplinary epidemiology/lab rat role. So I am very much not a hardware person. Not really even a software type, though I often looked like one for years. I am a kludger who usually just learns enough about stuff to solve some question or project I have. I don't even have informal training in this, and I don't talk to anyone about it, so please excuse me if my language use and concepts are less than technically correct.

To keep things simple, I wanted to make sure everything could ultimately be translated for Ethernet access. I started with a 1-wire Ethernet Adapter from Embedded Data Systems http://embeddeddatasystems.com/page/EDS/PROD/HA/HA7Net Their HA7NET box provides 1-wire parasitic power, reads the 1-wire bus and responds to IP addressable, high and lowlevel 1-Wire commands with data in HTML format.

My first interest is temperature, so I have put up five Dallas Maxim DS18B20s inside and around my house. Simplest hardware around. 1-wire network. DS18B20s with a Schottky diode across pins 2 and shorted 1 and 3. This is basically in initial development now. I have a little Python script that sends an HTML request to read the DS18B20's on the bus. I get back an HTML page that has the data, parse it out, and save it to a MySQL table. A basic PHP module averages the hourly data, min and max, and dislplays a basic MySQLdb tabulation in a browser.

The temp sensors are cheap, about $2.50 ea quantity 50 a year ago. I have a number of applications besides temperature measurement per se. For example, I have a shallow well that I will use for a drip irrigation project for my garden. Drawing too much water from the well at one time can destroy it by causing the well walls to collapse. I can tell when the well is running by the temperature difference of the incoming and outgoing pipes from the water pressurization unit. This along with other parameters will allow some gross level of control over the well pump. My current potential plans call for about 36 temp sensors to be used for one thing or another in the house. Quantity pricing being what it is, it was cheaper to buy 50.

Other transducers are available. Today I ordered two humidity sensor boards (for indoor and outdoor) and a barometric pressure circuit from http://www.hobby-boards.com, a vendor who offers 1-wire components. These probes are not as simple as the temp sensors, and not being a hardware type, it is easier for me to buy them. These boards may require custom addressing for the HA7NET adapter. These items can run into money as you can see at the site.

The rest of the meteorology will go slowly. I live near the top of a heavily wooded hill. There is a lot of air turbulence here, and I am not convinced that an anemometer setting at any reasonable height can give me useful wind information. Solar radiation and UV are much more important. My wife, who likes to garden has had two separate episodes of melanoma, and I would like to have good measures of UV at the appropriate wavelengths. This could be far more useful than the available UV indexes and inferencing that we now use to reduce her exposure. Further, I am not convinced that currently available UV meters and sensors are more useful than observation because they are limited in the UV bands they measure. I may have to make my own.

Rain fall is significant, but soil moisture more so. Commercial probes are cost prohibitive in the quantities that I would need them. I have seen plans for home made ones that might be useful for automating my drip irrigation. I could water by need rather than time.

I was always lucky in having work that I was able to “play” at – you all know what I mean. I was even more fortunate to be able to retire in my early 50s. Now I have been able to remove the penultimate constraint, in that I have no more deadlines (other than death), so my projects go by fits and starts depending upon interest and personal priorities. If you like, I will keep you appraised of my progress. But I warn you that there is never any guarantee of continuity on a particular project if that project lasts for more than a few minutes. My days are a serendipitous wandering focused on pleasing myself rather than being goal oriented.

There are a few personal weather station lists around, and they often discuss repair/maintenance of weather systems. Immediately at hand is http://www2.buoy.com/cgi-bin/mailman/listinfo/weather. If you are interested, I will dig around for the other one that I sometimes peruse.