login
menu treatments posted: Fri 2011-07-29 04:29:54 tags: web design

One of the things that always bothered me about my bread-and-butter client's web design was the horizontal menu. It was a set of images of "tabs", with related menu item text encoded right into each image.

Thus, anytime they wanted to add or change a tab, I had to muck around in GimpShop with font matching and smoothing and positioning for visual consistency between tabs. I have a fair eye for such things and what I produced was Good Enough. But it always rankled me, because I knew there had to be a more elegant solution that didn't result in proliferation of tab image files.

Today I got that all figured out, implementing the menu as a TR (table row) invoking a named pseudo-class in the stylesheet. The TD children of the row could then be uniformly and implicitly styled by extension of the pseudo-class, with a single blank tab graphic spec'ed as the background-image for each of the several cells in the table row. That one TR pseudo-class definition allowed me to retire all but the "blank" tab image file, and pare all the IMG references out of the HTML. As a side bonus, it also obviated the need for the hard-coded WIDTH attribute of the containing table element.