New Design Testing

Once again, Kabitzin’s redesign of Sea Slugs has caused me to get motivated to possibly redesign this site.  There are still several things left to check and do, and of course there is always the chance that I’ll get tired of the design and dump it, but you can see what I’ve done so far here.

There are several things left to check including:

  • Making sure everything on posts looks right
  • Making sure everything on pages looks right
  • Making sure everything on search/category/archive pages looks right
  • Implementing threaded comments
  • Fixing the footer
  • Figuring out why exclude_tree isn’t excluding the category in the “categories” menu (whoever designed the code for this is a blithering idiot.  I had to set “exclude” as well, as if I didn’t set exclude but did set exclude_tree, since hierarchical is true by default, the code overwrote my exclude_tree value by my empty exclude value. stupid.)
  • Importing my current database to make sure everything still works with what I’m doing now
  • Fix “choose theme” functionality again (though it’ll only change the banner, not the colors, on the new site)
  • Test a couple of new tidbits that I have in mind but I’m keeping secret
  • Anything else I run into

So it’s a long, though not really overbearing list of things left for me to do.  I played around with changing the color of the sidebar, but didn’t hit anything I liked, but I may try again.  Of course, if anyone else has any suggestions, fire away.

Update: Oh yeah, I also like how Kabitzin did his sidebar, so I may steal adapt his idea for that if I can come up with a good way to do it.

Update 2:

OK, I’ve run into a new problem, and it deals with the image gallery.  I’ve downloaded a plug-in that will allow me to code the gallery however I want, so the “normal” gallery code is a non-factor in this equation.

Basically what I’m trying to figure out is code that will:

  1. Have a box around all the images (as I do in my episode reviews now)
  2. Be only as wide as the images
  3. Be flexible enough so that images can stack horizontally for however wide the page is (meaning, it can be 2 wide, 3 wide, etc. depending on the size of the images and the width of the page)
  4. Preferably isn’t a table

Now, this sounds easy, but it isn’t.  Here is what I’ve tried and how it’s failed (at least in FF3 on the mac):

  1. Attempted Solution: Container is a div.  Problem: Expands to full width.  My current gallery code uses a nav, but that’s because I give it a set width.  However, I can’t do that in this case because I don’t necessarily know what the width is, and….
  2. Attempted Solution: Container is div with set width. Problem: Box is only as wide as width, either causing images to overflow out of box, making the images narrower to fit, or just plain cutting off the images once they’re outside the box.
  3. Attempted Solution: Container is span.  Problem: That fixes with width expansion problem.  However, now the top of the box starts near the bottom of the top row of images, and I can’t seem to figure out a way to make the span “cover up” the top of the first row of images.  I can’t set a height, because I don’t know how high the image stack will be.
  4. Attempted Solution: Container is span, with display set to inline-block.  Problem: In theory, this is supposed to work based on what I’ve read.  However, it acts just like a block, making the box full width of the page.
  5. Attempted Solution: Container is span, images are floated (or are in another box which is floated).  Problem: Images stack properly, but box is now outside of the stack of images (and very small).
  6. Attempted Solution: Container is div, images (or box that images are in) are floated.  Problem: As expected, the div has collapsed and there is basically no box there.
  7. Attempted Solution: Container is div, overflow is set to auto, images are floated.  Problem: Fixes the flat div problem, but it is still full width.
  8. Attempted Solution: Put images in a list, and making the li items display: inline.  Problem: ul (ie, the box) displays full width.

I’ve tried every combination displaying, floating, and whatever else I can think of and I’m about at wit’s end right now.  I’m just about ready to just say “i’m gonna style it for the new site, and heck with the old galleries. too bad if they look bad.”