« Looking for a virtual house | Main | Detached »

May 14, 2004

Fun with CSS

In an effort to relearn some Perl, I've started writing a CGI similar to ching(6). In itself that has nothing to do with CSS. But ching(6) in text format has the hexagrams a nice ASCII art, with each trigram labelled inline. It looks for example like:

          --------
          --------     above     Ch'ien The Creative, Heaven
          --------
          --------
          --------     below     Ch'ien The Creative, Heaven
          --------

Having redone the hexagrams in PNG format, I'd like to get the same effect... with CSS if possible. I've not been able to layout the table correctly:











Ch'ien

above

Ch'ien The Creative, Heaven

below

Ch'ien The Creative, Heaven

I don't want to resort to each line of the hexagram being it's own image, as that spaces it too much. That's what was done for the HTML version of ching(6).

So how do I do this properly in CSS, knowing that my hexagams are always 128 px wide and 94 px high?

Posted by Mark at May 14, 2004 10:15 PM