We have all the content we need on this page output and we have the header in place. Now we can start CSSin’ the content into the design we have going in Photoshop.
One thing we did was make the list of seven categories static. It’s just one less wp_list_pages() call and thus a bit more efficient. If we ever change the categories, that’s such a big thing it’s no big deal to revisit this code.
We need a two column design here essentially. That’s easy enough to do with just floating a couple of divs (or more likely, using our existing grid framework). But that doesn’t help us make “equal heights” columns as our design dictates here. After all, divs without set heights are only as tall as the content inside them. Setting a height on a div is generally a bad idea.
To get equal height columns, we fake it with a neat little idea where we use one big wrapper div (which is as tall as the tallest of the columns it contains) and set a gradient background. Not a fade-one-color-to-another gradient, but a gradient with hard stops right where the column breaks. This gives us the gray-on-the-left and white-on-the-right coloring we need.
We apply the different background colors to each category link in the left column with a series of :nth-child() selectors. We decide to to it this way rather than classes because the order of the colors is more important than matching the color to the category (it’s rather arbitrary).
Before we’re done with this screencast, we make the shadow effect happen (an emphatic separation between columns) by applying a pseudo element to the navigation which stretches from top to bottom of the page. This pseudo element has it’s own black-to-transparent gradient which makes it look like a shadow.
