Hack My Css

[schussat]

The past few days I have really been enjoying playing with Textpattern, a new weblog/cms application. Textpattern is slick, and has finally inspired me to redesign my weblog a bit -- it's been a long time! Now that I've thoroughly hacked up the style sheet that came with textpattern, I've become a bit googly-eyed from all the divs and ids. So I'm turning to the Family for some suggestions.

 

I have a design that I like quite a bit, but since I've always been rather hamfisted with the style sheets, it's pretty kludgy. It has three main issues: With a large browser window, the pencil image gets a little orphaned -- it's statically positioned to the upper left. Is there a way to stick it to the corner of the center column? My other two issues are with the right-hand column and have to do with window size as well: Can I align the column to stay next to the center column (so that in a large window, it's not orphaned like the above graphic)? And, with a very narrow browser window, the right-hand column bumps the main (center-column) text way down.

 

The mocked up textpattern page is at schussman.com/textpattern. Can any of you CSS masters give me a few pointers?

[btrfld]

Hi Shussat.

A couple of things I see.

 

The item id="left" has an actual width (165px), but the item id="singlecol", which I think is your main content, has a left-margin of 22%. When the window is small, the left block intrudes into the singlecol block, pushing the block down.

 

You seem to have right commented out, so I'm not sure what you're seeing there.

 

You can certainly move the pencil into the singlecol block. If you put it in as an image it will push the text down, or you can have it behind the text, as background.

 

Hope this helps, or at least doesn't hurt.

Jim

[schussat]

Hi Jim-

 

Thanks for the feedback! After tinkering with everything for the past hour or so, I figured out a little more about how positioning works, and I think I have most of my issues solved. Now I need to go back in and clean out the stuff I'm no longer using, so that the style sheet and html will be just a bit more readable. But as of right now, I'm pretty happy with the way it turned out.