Thursday, December 25, 2008

Floating in Style 

So as indicated previous post, I've begun updating, overhauling, and scrubbing the Awards database and index, step by step, beginning with a reformatting of the Nominee Index pages, which I've felt were a compromise layout to begin with...

The history of web page layout, in a tiny thumbnail, began with bulleted lists and indents (such as Locus Index to Science Fiction pages still use), advanced to grid layouts using 'tables' (with borders usually hidden), such as many websites including Locus Online still use, then moved beyond to spans and floats, such as typical blog templates and actual blogs (e.g. Making Light) use.

With spans and floats you needn't worry about figuring out a grid layout, you surround blocks of content by div or span tags, with classes pointing to definitions in your style sheet, which include settings to 'float' left or right, and let the relative positions of those blocks determine how they land (e.g. left column, center column, etc.) when the page is displayed in a browser.

I didn't know about floats when I designed the original Nominee Index pages, but after trial design I didn't want to rely on tables either. Ideally, I thought, the date and title along the left, and the award citations on the right, should be level across the page. To use a single table for an entire page would force all the titles to wrap, on the left, and all the citations to wrap, on the right, to the same dimensions. To use a separate table for each nominee, or title, would put so many tables in one page of html that the browsers I was using, back in 1999 or so, choked. So I avoided tables and used very basic block tags, aligned left and right for titles and citations. Even though that meant the citations began one line down from the end of the title...

So now I'm determined to find current html/style sheet/float settings to overcome that. Floats assigned to divs are really cool but have some restrictions, including the necessity of specifying exact width -- so the notion of free floating wraps for every title/citation entry, with the same set of tags, evaporated.

A bigger headache is that not all browsers interpret html, especially the more abstruse stuff like floats, the same way. A couple of times I had a layout refined perfectly in IE, only to discover the page was mincemeat in Firefox. IE, it seems, not only has bugs, but it is less strict in some ways than the other browsers, more forgiving of what might be considered minor html coding sins. So now I have five browsers installed on my home machine -- IE, Firefox, Chrome, Safari, and Opera -- and have a layout for the Nominee Index that looks good in all of them. Take a look, and let me know if anything looks wonky in *your* browser...
I suggest using something like
instead of a three-em dash for awards offered to the person, instead of to a particular work. The three-em dash means "same author as previously cited" to those of us who spent too much time in academia... and it creates this huge space gap in your layout that just adds to the confusion. To see what I mean, look closely but quickly at your entry for Lynn Abbey... and then try to figure out what the heck the entry for Forry Ackerman means.
Post a Comment

king under the dome

doctorow makers

banks transition

kress steal sky

atwood year flood

roberts yellow blue tibia

wilson julian comstock

 ness ask and answer

collins catching fire

collins hunger games

sawyer flashforward

baker hotel

disch proteus

tan tales

mazzucchelli asterios

zebrowski empties

morrow shambling

hamilton cpt future

beckett genesis

meller evo rx


kurzweil transcend

sawyer wake

ness knife never letting go

barzak love we share

mcewan cement garden

holland sci-fi art

gladwell outliers

bittman food matters

baggini what's it all about

Still in progress:

ross rest is noise

aldiss billion year spree

pollan omnivore's dilemma

Mark R. Kelly

The opinions expressed in this blog are solely those of Mark R. Kelly, and do not reflect the editorial position of Locus Magazine.
Latest Posts

This page is powered by Blogger. Isn't yours?