Tricklin

I spent a considerable amount of my free time on this site, and enjoyed every single second of it. Perhaps a little too much (ask my wife). Since I've spent so much time, and have learned a ton while doing so, I feel that it's only right, as a designer who utilized information from other blogs to create this one, to give a relatively detailed breakdown of this site. Since this will be somewhat detailed, I've decided to break it down into parts:

• Part I - Header
• Part II - Body
• Part III - Sidebar
• Part IV - Footer
• (links to the above list will be added as the entries are written)

The Header
The masthead consists of the logo and the navigation. This may not seem like a whole lot, yet some really nice CSS code is utilized here, making for some really clean markup, and a nice user experience. We'll start with the logo.
The Logo
The image itself is actually part of the background. Notice, when looking at the XHTML, there is no reference to the logo image itself:

<div id="logo">
    <a href="http://www.tricklin.com" name="top">Tricklin</a>
</div>

The beauty of this is that the logo image is in the background, declared in the CSS. To help clarify, let's take a look at this code:

#logo {
    margin: 0 0 0 6px;
    position:relative;
    float:left;
    width:200px;
}
#logo a {
    height:60px;
    width:200px;
    background: url(http://www.patmullin.com/tricklin/images/tricklin_logo_2 00x60.png) no-repeat;
    text-indent: -9000px;
    display:block;
}
#logo a:hover {
    background-position: 0 -60px;
}

The first section, #logo, acts as the placeholder for the logo image. By looking at this we know that the logo will appear on the left of the screen, and a margin of 6 pixels will keep it from butting directly up against the left edge of the browser window. We also know that since the image is only 200 pixels in width, that is the widest we need this section to be, so it is set to 200 pixels.

The remaining sections, #logo a and #logo a:hover, are what declare the logo image, and the properties that make it clickable. We'll start with the default link state. First, #logo a means that an anchor tag within the "logo" div will aquire these properties. Meaning all other anchor tags will not be affected. That said, the anchor tag inside "#logo" will place the "tricklin_logo_200x60.png" into the background and only show it once (no-repeat). If otherwise declared, the starting point for showing the image is 0 pixels from the left and 0 pixels from the top. As you can see from the actual logo image (above), it's actually 120 pixels in height, yet the image will only appear in an available window that is 60 pixels tall. So the user will only see the top-half of the logo image. So that when the mouse is "hovered (#logo a:hover)" over the logo, the bottom half of the logo will appear in the available window - background-position:0 -60px.

Navigation Menu
Once again, the markup for the navigation is nice and clean. There are no image references in the actual XHTML code. Let's have a look:

<div id="navigation">
    <ul class="nav">
        <li>&l t;a href="http://www.patmullin.com/portfolio.cfm" accesskey="1" class="portfolio"><span>portfolio</span></ a></li>
        <li>&l t;a href="http://www.patmullin.com/contact_me.cfm" accesskey="2" class="contactme"><span>contact me</span></a></li>
        <li>&l t;a href="http://www.patmullin.com/about_me.cfm" accesskey="3" class="aboutme"><span>projects</span></a&g t;</li>
        <li>&l t;a href="http://weblog.patmullin.com" accesskey="4" class="weblog_c"><span>journal</span></a&g t;</li>
    </ul>
</div>

Notice that each "button" has an accesskey associated to it. These were added to improve the accessibility of the site. Since Stuart Robertson does an excellent job explaining accesskeys in his article on A List Apart, I won't go into detail about this.

With some CSS coding, the navigation menu goes from looking like a bulleted list to a horizontal set of buttons:

#navigation ul.nav {
    padding: 0px;
    margin: 0px;
}
#navigation ul.nav li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#navigation ul.nav li a{
    float:left;
    display: block;
    list-style-type: none;
    margin: 0px;
    padding: 0;
}

Each button in the navigation menu has 3 states (using only 1 image), a mouser over (hover), a mouse out, and an active page state. Each state is represented using the same concept as with the logo:

#navigation ul.nav li a.portfolio, #navigation ul.nav li a.portfolio_c, #navigation ul.nav li a.portfolio:hover{
    width: 90px;
    height: 30px;
    background: url(http://www.patmullin.com/images/portfolio_nav_tab2.png) no-repeat;
}
#navigation ul.nav li a.portfolio{background-position:0 -50px;} // mouse out state
#navigation ul.nav li a.portfolio_c{background-position:0 -100px;} // active page state
#navigation ul.nav li a.portfolio:hover{background-position:0 0;} // mouse over state

So, that's the header in a nutshell. Next, I'll explain the Body, and all the little CSS elements and WordPress plugins used.