Preparing for a stylesheet switcher

Although my xhtml always validated, there were still presentational elements in the markup: for example, the #header div had an anchor to the home page that was coded

<a href="index.htm"><img src="bruce-logo"
height="xx" width="xxx" /></a>.

That was replaced by

<a href="index.htm"><span>Home page</span> </a>, using the css:

#Header h1, #Header a {display:block; background:url(images/bruce-logo.jpg) no-repeat center;width:auto; height:176px;}
#Header h1 span, #Header a span{margin-left:-5000px;}

That has the added semantic bonus that, on the homepage where has no link to itself (cos Jakob commanded me), the page title is a header, rather than a simple <img> in the header, thus paying me Google dividends.

Similarly, the "ransom note" images for main nav were just a collection of images separated by <br /> tags. That needed to be moved into the css so that the images could be changed on a stylesheet switch. This is a bit more cumbersome. Here’s the xhtml:

<ul id="mainnav">
<li><a id="home" href="index.htm"><span>Home page</span></a></li>
<li><a id="music" href="music.htm"><span>Bruce's music</span></a></li>
<li><a id="about" href="about.htm"> <span>Who is this wanker?</span> </a></li>
<li><a id="nav-photos" href="photos.htm"><span>Pics and stories</span></a></li>
<li><a id="writing"
href="writing.htm"><span>writing stuff</span></a></li>
<li><a id="links" href="links.htm"><span>links page</span> </a></li>
<li><a id="email" href="mailto:bruce%20AT%20brucelawson%20DOT%20co%20DOT%20uk"><span>send spam</span> </a></li>
</ul>

and here’s the CSS

ul#mainnav {list-style:none; margin-left:0px; padding-left:0px}
ul#mainnav a {display:block;}
ul#mainnav a span {margin-left:-5000px;} /* replace text for main nav buttons */
a#music {background:url(images/music.jpg); width:200px; height:72px;}
a#about {background:url(images/about.jpg); width:184px; height:46px;}
a#nav-photos {background:url(images/photos.jpg); width:200px; height:66px;}
a#writing {background:url(images/writing.jpg); width:200px; height:68px;}
a#links{background:url(images/links.jpg); width:190px; height:77px;}
a#email{background:url(images/email.jpg); width:200px; height:88px;}
a#home{background:url(images/nav_home.jpg); width:200px; height:88px;}

I don’t particularly like all the <span>s there for image replacement, and am toying with the idea of using the Image Replacement—No Span technique, but that requires polluting the CSS with box model stuff for IE5 (do I really give a shit about IE5?), so my internal jury is still out.

Comments are closed.