WEB STANDARDS CREATIVITY

44
Spit and polish
There are a few extra details that could go unnoticed if I don’t mention them specifically. For example, the logo at the top
left of the layout could have easily been included in the main band photo, reducing the number of images needed to produce
the page. However, making the logo a separate image file allowed me to set it as the background of the tag, and
make the tag (and thus the logo) a link to the homepage:
Here’s the XHTML:
Lifehouse
And here’s the CSS:
h1#logo {
position:absolute;
z-index:100;
left:29px;
top:39px;
margin:0;padding:0;
}
h1#logo a {
display:block;
background:url(../i/logo_lifehouse.gif) no-repeat;
width:38px;
height:175px;
text-indent:-5000px;
}
Et voilà, I now have a clickable logo.
Using Firefox? You have probably noticed that this image replacement technique (Mike Rundle’s Phark method, mentioned
earlier) causes that browser’s dotted link borders to extend all the way to the left edge of the browser window when clicked,
which isn’t very attractive. Luckily, this can be easily fixed by dropping a {outline:none;} into your style sheet. Figure 2-9
show the before and after effects.
Another item of note is the primary navigation (...), which gets marked up as a simple unordered list.
Luckily, the navigation wasn’t generated by the CMS, but could be marked up by hand and included server-side on all pages
of the site, since as I mentioned earlier, the CMS output templates didn’t include lists. The navigation bar uses a simplified
variation of the technique known as the Navigation Matrix (Navigation Matrix Reloaded, http://superfluousbanter.org/
archives/2004/05/navigation-matrix/) to create the image-based navigation and hover effects. The entire navigation is
created using only one image (nav_matrix.gif) referenced in the CSS, as shown in Figure 2-10.