More Fun with CSS Tweaking

Friday, December 09, 2005, at 01:00PM

By Eric Richardson

Whenever I roll a look onto a site, it typically takes a good week or so before it gets to the point where I'm happy with it. It may only take an hour to put a nice mast together and pick out a dominant color to scheme off of, but it seems like the CSS tweaking afterward can take forever.

This evening I re-jiggered the CSS for two more bits of the blog: the archives and the comments.

Archives

The archives page breaks down the history of this blog by month. Seeing as my first post was on November 30th, 1998, that's a good long time. The previous design had each month on its own line, meaning that the list was very narrow (maybe 1/4 of the width of the content area) and very long.

To try and make things flow better, I wanted to show a couple months per line. I'm lazy, though, and didn't really want to break the simple list implementation. So basically I stole a page from the tab-navigation I use all over the place and made the list items floats with fixed widths:

ul.archives li {
    float: left;
}

ul.archives li a {
    display: block;
    background: url('pages.gif') no-

repeat top left; padding-left: 18px; line-height: 1.8em; width: 120px; border: 0; }

Putting the block element in the a tag instead of the li lets the entire 120x18 box be clickable.

Then I ran into a fun old problem where float elements don't actually figure into the box model size computations for their enclosing element. So my old structure of just throwing the year name in a bold tag between lists had nothing in the way of padding (the browser was smart enough not to actually overlap them). Adding an enclosing div so that I could do a:

<br style="clear: both;"/>

got the size right, but I had to get rid of that bold tag and make the list header a div before I could put padding at the top of it.

Comments

My model here is the comments on Mike Davidson's blog. I really like the differentiation between his comments and those others make. Doing that in eThreads required a little jiggering in the comment code, but that was easy enough (I did write the thing, after all. I better be able to make changes in it).

The other element here is a continuation of my pattern of devaluing dates and times. Forever that was the top bit of information because it's basically the most unique. But no one really cares at exactly what time a post is made. Sure, make the info available, but put it out of the way. Let the content be the most important thing.