Someone I’ve been chatting with in the Textpattern support forum asked how I’d done this layout. I thought I’d post my response here…
First I did a Photoshop mockup to get the layered look the way I wanted it. I put the branch in the upper right corner and then did a gradient on the nav list and a solid fill on the blog box. On both of those layers I reduced the transparency so the branch showed through. Once that was done I started cropping out what I wanted and saving separate files with the layers merged. I ended up with three image files:
redbranch.jpg became the page background. branchcorner.jpg is the background for the blog div, with the rest of the box filled in using the same shade of gray (#eee) that I got from the semi-transparent layer in Photoshop. In the CSS:
background: url(images/branchcorner.jpg) #eee top right no-repeat;
And navbg is the background for the unordered list that holds the navigation. The nav ul has a 1px white border all the way around; the blog div has white on the top and right and #ccc on the left and bottom sides.
Everything on the page except “sillybean” is positioned absolutely relative to the top right corner. (“sillybean” is also absolutely positioned, but it’s to the left. An unfortunate side effect of this is that the nav bar overlaps it if your window is very narrow. I could avoid this, but I wanted them to be on the same horizontal line, visually.)
The blog box is actually two nested divs. .blog is an invisible box that contains the blog entries and the footer stuff. This has a percentage width, which lets it flex as you resize the browser. This way it’ll always be in the correct place on top of the branch, but the left side is negotiable without ever touching the left margin. .blogbody is the gray box with the gray and white borders. (These classes are relics from the Movable Type default templates.)
I completely stole the navigation idea from cinnamon.nl. Here’s the CSS for each element in