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:
http://www.sillybean.net/redbranch.jpg
http://www.sillybean.net/images/branchcorner.jpg
http://www.sillybean.net/images/navbg.jpg
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
- :
- About
- About
- Archives
- Portfolio
#nav li {
float: right;
display: block;
margin: 0;
padding: 0;
border: 0;
}
So that gets them lined up horizontally with the navbg.jpg image showing through. Then I needed rollover effects:
#nav li a:hover {
color: #602;
margin: 0;
background-color: #eee;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
This turns the background solid. The added borders shift the list element very slightly and give it the same almost-beveled look that the blog div has. Those two effects combined make it look like the button’s being punched down… which was a total accident that happened during coding, and I liked it, so I kept it. 
I could have just used text links and left it at that, but Windows does so badly at displaying anti-aliased text that I wanted to use images for such a prominent part of the page, so again I copied cinnamon.nl’s technique. Here’s one element in the HTML:
In the CSS:
a#about, a#about span.image {
background-image: url(images/about.gif);
width: 53px;
}
So each list item has its own ID, which in the CSS defines a particular background image—a transparent gif of the word I wanted. Then each item includes an “image” span, which allows me to hide the real text with:
#nav span { display: none; }
One funky thing is that because the list items are floated to the right, they appear in reverse order. If you code
you’ll get Portfolio – Archives – About.
A couple of pages have a secondary navigation list under the main one; for that I did another gradient background out of Photoshop:
http://www.sillybean.net/images/rosebranchbg.jpg
and coded the list elements the same way. On those pages, the subnav is absolutely positioned just below the main one.
Since I was using absolute positioning, I was able to put the nav lists at the bottom of the page code, which is all nice and accessible and stuff.
