Yesterday we looked at the how, using Fireworks, we can create arrow-like images to add to our web site's main navigational menu. What we're aiming for is a site that looks like this:

Where the current menu item is highlighted by an arrow (ignore the fact it's on the wrong "tab" in the image above). To do this we exported three images from our Fireworks mockup, which look like this:

There's nav_li_bg.png and header_bg.png  and body_bg.png . That's all we'll need.

Creating The Webpage

The HTML for our page is structured simply like this:

<div id="container">
        <div id="header">
                <div id="navbar">
                        <ul></ul>
                </div>  
        </div>
        <div id="content">
        </div>
</div>

With some content in place, but no CSS it looks like this:

Now, let's start adding some CSS. First we're going to center the container and give the main body a background.

body{
        background:#C0C0C0 url(body_bg.png) repeat-x top left;
}

#container{
        width:829px;
        margin:0px auto;
        background-color:#fff;
}

The page then looks like this:

Now we need to continue the dark grey bar across the page and align the header items. To do this we use the following CSS:

#header{
        padding:0px;
        margin:0px;
        height: 145px;
        background:#666 url(header_bg.png) repeat-x top left;
}

#navbar{
        overflow:hidden;
        position:absolute;
        top:109px;
        height:70px;
}

#navbar ul li{
        background:none;
        padding: 0 12px;
        list-style-type:none;
        float:left;
}

Notice the header has a fixed height of 145px which is the same height as the background repeater image we created for it. Notice also that we've positioned the navbar div using absolute positioning so that it sits at the bottom of the header div. I've missed a few bits out, but you can see all the CSS later. The site now looks like this:

All that's left to do is add the arrow to the selected list item in the menu. The HTML for the selected item looks like this:

<li class="selected"><a href="/">About</a></li>

Now, bear in mind that the background image we created looks like this:

The CSS we need to add to place this image on the selected link looks like:

#navbar ul li.selected a{
        background:transparent url(nav_li_bg.png) no-repeat scroll center bottom;
	padding-bottom:25px; 
}

There are a couple of tricks in use. Firstly that we've aligned the arrow image with the bottom and the centre of the <A> tag. No matter how wide (or tall) the link is the fact the image itself is quite wide should mean the arrow is always in the centre. Even with a wider link the background of the header itself should bleed through. If not then just make the background image much wider.

The second pivotal trick is to add some extra padding to the bottom of the selected link. This pushes the background image downward, as it's aligned with the bottom of the link tag, while leaving the actual link text where it needs to be. That's all there is to it really. Just one clever little trick to make the selected link appear taller than the others.

The height of 25px isn't some magic number. It just happens to be the height needed for the image I created. In practice getting everything to align properly is a matter of trial and error while notching the height up and down a few pixels at a time. A bit fiddly, but worth it!

You can see the final HTML page here and you can download the necessary CSS from there. Happy styling!

For you Domino lovers, sorry it's not in an NSF file. You'll just have to work that bit out for yourself.